Styling updates

addon/components/velvet-disclosure.hbs

@@ -1,6 +1,6 @@
 <div
   class="velvet-disclosure"
-  {{(if this.shouldAnimate (modifier "-velvet/auto-animate"))}}
+  {{(if this.shouldAnimate (modifier "velvet-auto-animate"))}}
   ...attributes
 >
   {{yield
@@ -12,7 +12,10 @@
         onClick=this.toggle
       )
       IconButton=(component
-        (ensure-safe-component this.VelvetIconButton) onClick=this.toggle
+        (ensure-safe-component this.VelvetIconButton)
+        isDisclosure=true
+        isExpanded=this.isShown
+        onClick=this.toggle
       )
       isShown=this.isShown
       hide=this.hide

addon/components/velvet-icon-button.hbs

@@ -5,6 +5,7 @@
     (concat "velvet-icon-button-" (or @variant "primary"))
     (if @isRound "velvet-icon-button-round")
     (if @isDisabled "velvet-icon-button-disabled")
+    (if @isDisclosure (if @isExpanded "velvet-icon-button-expanded"))
   )
   as |className|
 }}
@@ -21,12 +22,16 @@
     >
       {{#if @isLoading}}
         <VelvetSpinner />
-      {{else if @isDisclosure}}
-        <this.VelvetIconChevronDown
-          class="velvet-icon-button-disclosure-icon"
-        />
-      {{else}}
+      {{else if (has-block)}}
         {{yield (hash class=className)}}
+      {{else if @isDisclosure}}
+        {{#if @isExpanded}}
+          <this.VelvetIconXMark class="velvet-icon-button-disclosure-icon" />
+        {{else}}
+          <this.VelvetIconChevronDown
+            class="velvet-icon-button-disclosure-icon"
+          />
+        {{/if}}
       {{/if}}
     </button>
   {{/if}}

addon/components/velvet-icon-button.ts

@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import type { ModifierLike } from "@glint/template";
 import type { TriggerSignature } from "velvet-thunder/components/velvet-dropdown";
 import VelvetIconChevronDown from "velvet-thunder/components/velvet-icon/chevron-down";
+import VelvetIconXMark from "velvet-thunder/components/velvet-icon/x-mark";
 
 interface VelvetIconButtonSignature {
   Args: {
@@ -11,6 +12,9 @@ interface VelvetIconButtonSignature {
     /// Indicate if the icon button discloses content.
     /// @default [false]
     isDisclosure?: boolean;
+    /// Indicate if the icon button's disclosed content is expanded.
+    /// @default [false]
+    isExpanded?: boolean;
     /// Indicate if the icon button should render a loading state.
     /// @default [false]
     isLoading?: boolean;
@@ -44,6 +48,7 @@ interface VelvetIconButtonSignature {
 
 export default class VelvetIconButton extends Component<VelvetIconButtonSignature> {
   VelvetIconChevronDown = VelvetIconChevronDown;
+  VelvetIconXMark = VelvetIconXMark;
 
   clickHandler = (event: MouseEvent) => {
     const { isDisabled, onClick } = this.args;

addon/glint.ts

@@ -1,3 +1,4 @@
+// Components:
 import type VelvetAlert from "velvet-thunder/components/velvet-alert";
 import type VelvetAvatar from "velvet-thunder/components/velvet-avatar";
 import type VelvetButton from "velvet-thunder/components/velvet-button";
@@ -22,9 +23,11 @@ import type VelvetTextarea from "velvet-thunder/components/velvet-textarea";
 import type VelvetTooltip from "velvet-thunder/components/velvet-tooltip";
 import type VelvetTooltipContent from "velvet-thunder/components/velvet-tooltip/content";
 
+// Modifiers:
+import type VelvetAutoAnimateModifier from "velvet-thunder/modifiers/velvet-auto-animate";
+
 // Private:
 import type VelvetClassListHelper from "velvet-thunder/helpers/-velvet/class-list";
-import type VelvetAutoAnimateModifier from "velvet-thunder/modifiers/-velvet/auto-animate";
 
 // Dependencies:
 import type { EmbroiderUtilRegistry } from "@embroider/util";
@@ -34,6 +37,7 @@ declare module "@glint/environment-ember-loose/registry" {
   export default interface Registry
     extends EmbroiderUtilRegistry,
       EmberTruthHelpersRegistry {
+    // Components:
     VelvetAlert: typeof VelvetAlert;
     VelvetAvatar: typeof VelvetAvatar;
     VelvetButton: typeof VelvetButton;
@@ -55,6 +59,7 @@ declare module "@glint/environment-ember-loose/registry" {
     VelvetTextarea: typeof VelvetTextarea;
     VelvetTooltip: typeof VelvetTooltip;
 
+    // Components:
     "velvet-alert": typeof VelvetAlert;
     "velvet-avatar": typeof VelvetAvatar;
     "velvet-button": typeof VelvetButton;
@@ -79,8 +84,10 @@ declare module "@glint/environment-ember-loose/registry" {
     "velvet-tooltip": typeof VelvetTooltip;
     "velvet-tooltip/content": typeof VelvetTooltipContent;
 
+    // Modifiers:
+    "velvet-auto-animate": typeof VelvetAutoAnimateModifier;
+
     // Private:
     "-velvet/class-list": typeof VelvetClassListHelper;
-    "-velvet/auto-animate": typeof VelvetAutoAnimateModifier;
   }
 }

addon/modifiers/velvet-auto-animate.ts

@@ -0,0 +1,14 @@
+import formkitAutoAnimate from "@formkit/auto-animate";
+import { modifier } from "ember-modifier";
+
+interface VelvetAutoAnimateSignature {
+  Element: HTMLElement;
+}
+
+export default modifier<VelvetAutoAnimateSignature>(
+  function velvetAutoAnimate(element) {
+    const { disable } = formkitAutoAnimate(element);
+
+    return () => disable();
+  },
+);

app/modifiers/velvet-auto-animate.js

@@ -0,0 +1 @@
+export { default } from "velvet-thunder/modifiers/velvet-auto-animate";

docs-styles/components/alert.css

@@ -1,81 +1,81 @@
 /* stylelint-disable no-descending-specificity */
 
 .velvet-alert-info {
-  @apply bg-sky-100 border-sky-200 text-sky-800;
-  @apply dark:bg-sky-900 dark:border-sky-800 dark:text-sky-400;
+  @apply bg-sky-200 text-sky-800;
+  @apply dark:bg-sky-800 dark:text-sky-200;
 
   .velvet-icon-button-alert {
-    @apply bg-sky-200/40;
-    @apply dark:bg-sky-800/40;
+    @apply bg-sky-400/20;
+    @apply dark:bg-sky-600/40;
 
     &:hover {
-      @apply bg-sky-200/60;
-      @apply dark:bg-sky-800/60;
+      @apply bg-sky-400/40;
+      @apply dark:bg-sky-600/60;
     }
 
     &:active {
-      @apply bg-sky-200/80;
-      @apply dark:bg-sky-800/80;
+      @apply bg-sky-400/60;
+      @apply dark:bg-sky-600/80;
     }
   }
 }
 
 .velvet-alert-success {
-  @apply bg-emerald-100 border-emerald-200 text-emerald-800;
-  @apply dark:bg-emerald-900 dark:border-emerald-800 dark:text-emerald-400;
+  @apply bg-emerald-200 text-emerald-800;
+  @apply dark:bg-emerald-800 dark:text-emerald-200;
 
   .velvet-icon-button-alert {
-    @apply bg-emerald-200/40;
-    @apply dark:bg-emerald-800/40;
+    @apply bg-emerald-400/20;
+    @apply dark:bg-emerald-600/40;
 
     &:hover {
-      @apply bg-emerald-200/60;
-      @apply dark:bg-emerald-800/60;
+      @apply bg-emerald-400/40;
+      @apply dark:bg-emerald-600/60;
     }
 
     &:active {
-      @apply bg-emerald-200/80;
-      @apply dark:bg-emerald-800/80;
+      @apply bg-emerald-400/60;
+      @apply dark:bg-emerald-600/80;
     }
   }
 }
 
 .velvet-alert-warning {
-  @apply bg-amber-100 border-amber-200 text-amber-800;
-  @apply dark:bg-amber-900 dark:border-amber-800 dark:text-amber-400;
+  @apply bg-amber-200 text-amber-800;
+  @apply dark:bg-amber-800 dark:text-amber-200;
 
   .velvet-icon-button-alert {
-    @apply bg-amber-200/40;
-    @apply dark:bg-amber-800/40;
+    @apply bg-amber-400/20;
+    @apply dark:bg-amber-600/40;
 
     &:hover {
-      @apply bg-amber-200/60;
-      @apply dark:bg-amber-800/60;
+      @apply bg-amber-400/40;
+      @apply dark:bg-amber-600/60;
     }
 
     &:active {
-      @apply bg-amber-200/80;
-      @apply dark:bg-amber-800/80;
+      @apply bg-amber-400/60;
+      @apply dark:bg-amber-600/80;
     }
   }
 }
 
 .velvet-alert-danger {
-  @apply bg-rose-100 border-rose-200 text-rose-800;
-  @apply dark:bg-rose-900 dark:border-rose-800 dark:text-rose-400;
+  @apply bg-rose-200 text-rose-800;
+  @apply dark:bg-rose-800 dark:text-rose-200;
 
   .velvet-icon-button-alert {
-    @apply bg-rose-200/40;
-    @apply dark:bg-rose-800/40;
+    @apply bg-rose-400/20;
+    @apply dark:bg-rose-600/40;
 
     &:hover {
-      @apply bg-rose-200/60;
-      @apply dark:bg-rose-800/60;
+      @apply bg-rose-400/40;
+      @apply dark:bg-rose-600/60;
     }
 
     &:active {
-      @apply bg-rose-200/80;
-      @apply dark:bg-rose-800/80;
+      @apply bg-rose-400/60;
+      @apply dark:bg-rose-600/80;
     }
   }
 }

docs-styles/components/progress.css

@@ -1,31 +1,31 @@
 .velvet-progress-primary {
-  @apply bg-slate-400/20;
-}
+  @apply bg-slate-200;
 
-.velvet-progress-primary .velvet-progress-line {
-  @apply bg-slate-400;
+  .velvet-progress-line {
+    @apply bg-slate-400;
+  }
 }
 
 .velvet-progress-emerald {
-  @apply bg-emerald-400/20;
-}
+  @apply bg-emerald-200;
 
-.velvet-progress-emerald .velvet-progress-line {
-  @apply bg-emerald-400;
+  .velvet-progress-line {
+    @apply bg-emerald-400;
+  }
 }
 
 .velvet-progress-amber {
-  @apply bg-amber-400/20;
-}
+  @apply bg-amber-200;
 
-.velvet-progress-amber .velvet-progress-line {
-  @apply bg-amber-400;
+  .velvet-progress-line {
+    @apply bg-amber-400;
+  }
 }
 
 .velvet-progress-rose {
-  @apply bg-rose-400/20;
-}
+  @apply bg-rose-200;
 
-.velvet-progress-rose .velvet-progress-line {
-  @apply bg-rose-400;
+  .velvet-progress-line {
+    @apply bg-rose-400;
+  }
 }

docs-styles/prose.css

@@ -21,3 +21,7 @@
 
   content: "";
 }
+
+.col-name {
+  @apply whitespace-nowrap;
+}

docs/components/alert/demo/handle-hide-events.md

@@ -3,7 +3,7 @@
 Use the `@onHide` argument to handle `hide` events.
 
 ```hbs template
-<DemoSpaceY {{-velvet/auto-animate}}>
+<DemoSpaceY {{velvet-auto-animate}}>
   {{#if this.isShown}}
     <VelvetSwitch
       @isChecked={{this.isHideable}}

docs/components/alert/index.md

@@ -54,19 +54,19 @@ manualDemoInsertion: true
 </DemoSpaceY>
 ```
 
-## Custom Icon
+## Custom Icons
 
 ```hbs preview-template
-<VelvetAlert @level="info">
+<VelvetAlert @level="danger">
   <:icon as |icon|>
-    <DemoLinkIcon class={{icon.class}} />
+    <VelvetIcon::XMark class={{icon.class}} />
   </:icon>
   <:title>
-    Info Alert
+    Danger Alert
   </:title>
   <:content>
-    More info about this info alert goes here. This example text is going to run
-    a bit longer, so that you can see how spacing within an alert works with
+    More info about this danger alert goes here. This example text is going to
+    run a bit longer, so that you can see how spacing within an alert works with
     this kind of content.
   </:content>
 </VelvetAlert>

docs/components/button/index.md

@@ -71,6 +71,26 @@ manualDemoInsertion: true
 </DemoSpaceX>
 ```
 
+## Expanded
+
+```hbs preview-template
+<DemoSpaceX>
+  <VelvetButton @isDisclosure={{true}} @isExpanded={{true}} @variant="primary">
+    Button
+  </VelvetButton>
+  <VelvetButton
+    @isDisclosure={{true}}
+    @isExpanded={{true}}
+    @variant="secondary"
+  >
+    Button
+  </VelvetButton>
+  <VelvetButton @isDisclosure={{true}} @isExpanded={{true}} @variant="ghost">
+    Button
+  </VelvetButton>
+</DemoSpaceX>
+```
+
 ## Renderless
 
 ```hbs preview-template