@happyvertical/smrt-ui 0.55.21 → 0.55.23

package/dist/components/ui/Badge.svelte

@@ -15,67 +15,65 @@ interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'class'> {
 const { variant = 'default', size = 'md', children, ...rest }: Props = $props();
 </script>
 
-<span class="badge {variant} {size}" {...rest} data-smrt-component="Badge">
+<span class="smrt-badge__root smrt-badge__{variant} smrt-badge__{size}" {...rest} data-smrt-component="Badge">
   {@render children?.()}
 </span>
 
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
-@layer smrt.theme {
-  .badge {
+@layer smrt.structure {
+  .smrt-badge__root {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    white-space: nowrap;
+  }
+  .smrt-badge__sm {
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+  }
+  .smrt-badge__md {
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-3);
+  }
+}
+@layer smrt.theme {
+  .smrt-badge__root {
     font-weight: var(--smrt-control-weight);
     border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-full);
-    white-space: nowrap;
   }
-
-  /* Sizes */
-  .sm {
-    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+  .smrt-badge__sm {
     font-size: var(--smrt-typography-body-small-size);
   }
-
-  .md {
-    padding: var(--smrt-spacing-1) var(--smrt-spacing-3);
+  .smrt-badge__md {
     font-size: var(--smrt-typography-body-medium-size);
   }
-
-  /* Variants */
-  .default {
+  .smrt-badge__default {
     background: var(--smrt-color-surface-container-high);
     color: var(--smrt-color-on-surface);
   }
-
-  .primary {
+  .smrt-badge__primary {
     background: var(--smrt-color-primary-container);
     color: var(--smrt-color-on-primary-container);
   }
-
-  .success {
+  .smrt-badge__success {
     background: var(--smrt-color-success-container);
     color: var(--smrt-color-on-success-container);
   }
-
-  .warning {
+  .smrt-badge__warning {
     background: var(--smrt-color-warning-container);
     color: var(--smrt-color-on-warning-container);
   }
-
-  .error {
+  .smrt-badge__error {
     background: var(--smrt-color-error-container);
     color: var(--smrt-color-on-error-container);
   }
-
-  .info {
+  .smrt-badge__info {
     background: var(--smrt-color-primary-container);
     color: var(--smrt-color-on-primary-container);
   }
   /* Forced colors (#3908): system colours where colour alone carries meaning. */
   @media (forced-colors: active) {
-    .badge { background: Canvas; color: CanvasText; border-color: CanvasText; }
+    .smrt-badge__root { background: Canvas; color: CanvasText; border-color: CanvasText; }
   }
 }
 </style>

package/dist/components/ui/Button.svelte

@@ -29,7 +29,7 @@ export interface Props extends Omit<HTMLButtonAttributes, 'class' | 'href'> {
   /** Loading state */
   loading?: boolean;
   /**
-   * Extra class(es) appended after the base `button {variant} {size}` styling.
+   * Extra class(es) appended after the base `button smrt-button__{variant} smrt-button__{size}` styling.
    * Lets callers adopt Button for custom-styled buttons without losing their
    * own CSS (issue #1589) — the base button styling still applies.
    */
@@ -121,10 +121,10 @@ function handleClick(event: MouseEvent) {
     {target}
     {rel}
     {download}
-    data-density={density} class="button {variant} {size} {className}"
-    class:disabled={isDisabled}
-    class:full-width={fullWidth}
-    class:loading
+    data-density={density} class="smrt-button__root smrt-button__{variant} smrt-button__{size} {className}"
+    class:smrt-button__disabled={isDisabled}
+    class:smrt-button__full-width={fullWidth}
+    class:smrt-button__loading={loading}
     tabindex={isDisabled ? -1 : undefined}
     aria-disabled={isDisabled}
     aria-busy={loading}
@@ -132,9 +132,9 @@ function handleClick(event: MouseEvent) {
     {...linkProps()} data-smrt-component="Button"
   >
     {#if loading}
-      <span class="spinner" aria-hidden="true" data-smrt-part="spinner"></span>
+      <span class="smrt-button__spinner" aria-hidden="true" data-smrt-part="spinner"></span>
     {/if}
-    <span class="content" class:loading data-smrt-part="label">
+    <span class="smrt-button__content" class:smrt-button__loading={loading} data-smrt-part="label">
       {@render children?.()}
     </span>
   </a>
@@ -143,16 +143,16 @@ function handleClick(event: MouseEvent) {
     {type}
     disabled={isDisabled}
     aria-busy={loading}
-    data-density={density} class="button {variant} {size} {className}"
-    class:full-width={fullWidth}
-    class:loading
+    data-density={density} class="smrt-button__root smrt-button__{variant} smrt-button__{size} {className}"
+    class:smrt-button__full-width={fullWidth}
+    class:smrt-button__loading={loading}
     onclick={handleClick}
     {...rest} data-smrt-component="Button"
   >
     {#if loading}
-      <span class="spinner" aria-hidden="true" data-smrt-part="spinner"></span>
+      <span class="smrt-button__spinner" aria-hidden="true" data-smrt-part="spinner"></span>
     {/if}
-    <span class="content" class:loading data-smrt-part="label">
+    <span class="smrt-button__content" class:smrt-button__loading={loading} data-smrt-part="label">
       {@render children?.()}
     </span>
   </button>
@@ -160,171 +160,157 @@ function handleClick(event: MouseEvent) {
 
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
-@layer smrt.theme {
-  .button {
+@layer smrt.structure {
+  .smrt-button__root {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--smrt-spacing-2);
     position: relative;
+    cursor: pointer;
+  }
+  .smrt-button__root::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .smrt-button__sm {
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+  }
+  .smrt-button__md {
+    padding: var(--smrt-spacing-3) var(--smrt-spacing-4);
+  }
+  .smrt-button__lg {
+    padding: var(--smrt-spacing-4) var(--smrt-spacing-6);
+  }
+  .smrt-button__full-width {
+    width: 100%;
+  }
+  .smrt-button__loading {
+    position: relative;
+  }
+  .smrt-button__spinner {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 1em;
+    height: 1em;
+  }
+  .smrt-button__content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--smrt-spacing-2);
+  }
+  .smrt-button__content.smrt-button__loading {
+    opacity: 0;
+  }
+  .smrt-button__root:disabled,
+  .smrt-button__root.smrt-button__disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  @media (max-width: 48rem) {
+    .smrt-button__root {
+      min-block-size: 2.75rem;
+    }
+  }
+  .smrt-button__root[data-density='touch'] {
+    --smrt-button-target-min: var(--smrt-touch-target-min);
+  }
+  .smrt-button__root[data-density='comfortable'] {
+    --smrt-button-target-min: 0px;
+  }
+  .smrt-button__root {
+    min-height: max(var(--smrt-control-height), var(--smrt-button-target-min, var(--smrt-control-target-min)));
+    min-width: var(--smrt-button-target-min, var(--smrt-control-target-min));
+  }
+  .smrt-button__root.smrt-button__sm {
+    min-height: max(var(--smrt-control-height-small), var(--smrt-button-target-min, var(--smrt-control-target-min)));
+  }
+}
+@layer smrt.theme {
+  .smrt-button__root {
     font-weight: var(--smrt-control-weight);
     border-radius: var(--smrt-control-radius);
     transition: all var(--smrt-duration-short2) var(--smrt-easing-standard);
-    cursor: pointer;
     text-decoration: none;
     border: 1px solid transparent;
   }
-
-  /* One state layer for every variant: currentColor mixed at the theme's
-     state opacity. Per-variant tweaks use --smrt-button-state-* names. */
-  .button::after {
-    content: '';
-    position: absolute;
-    inset: 0;
+  .smrt-button__root::after {
     border-radius: inherit;
     background: transparent;
-    pointer-events: none;
     transition: background-color var(--smrt-duration-short2) var(--smrt-easing-standard);
   }
-
-  .button:hover:not(:disabled):not(.disabled)::after {
+  .smrt-button__root:hover:not(:disabled):not(.smrt-button__disabled)::after {
     background: color-mix(
       in srgb,
       currentColor calc(var(--smrt-state-hover) * 100%),
       transparent
     );
   }
-
-  .button:active:not(:disabled):not(.disabled)::after {
+  .smrt-button__root:active:not(:disabled):not(.smrt-button__disabled)::after {
     background: color-mix(
       in srgb,
       currentColor calc(var(--smrt-state-pressed) * 100%),
       transparent
     );
   }
-
-  /* Sizes */
-  .sm {
+  .smrt-button__sm {
     border-radius: var(--smrt-control-radius-small);
-    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     font-size: var(--smrt-typography-body-medium-size);
   }
-
-  .md {
-    padding: var(--smrt-spacing-3) var(--smrt-spacing-4);
+  .smrt-button__md {
     font-size: var(--smrt-typography-body-large-size);
   }
-
-  .lg {
-    padding: var(--smrt-spacing-4) var(--smrt-spacing-6);
+  .smrt-button__lg {
     font-size: var(--smrt-typography-title-medium-size);
   }
-
-  /* Variants */
-  .primary {
+  .smrt-button__primary {
     background: var(--smrt-color-primary);
     color: var(--smrt-color-on-primary);
   }
-
-
-  .secondary {
+  .smrt-button__secondary {
     background: var(--smrt-surface-control);
     color: var(--smrt-color-primary);
     border-color: var(--smrt-color-primary);
   }
-
-
-  .ghost {
+  .smrt-button__ghost {
     background: transparent;
     color: var(--smrt-color-primary);
   }
-
-
-  .danger {
+  .smrt-button__danger {
     background: var(--smrt-color-error);
     color: var(--smrt-color-on-error);
   }
-
-
-  /* Full width */
-  .full-width {
-    width: 100%;
-  }
-
-  /* Loading state */
-  .loading {
-    position: relative;
-  }
-
-  .spinner {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 1em;
-    height: 1em;
+  .smrt-button__spinner {
     border: 2px solid currentColor;
     border-right-color: transparent;
     border-radius: var(--smrt-radius-full);
     animation: spin 0.75s linear infinite;
   }
-
   @keyframes spin {
-    from { transform: translate(-50%, -50%) rotate(0deg); }
-    to { transform: translate(-50%, -50%) rotate(360deg); }
-  }
-
-  /* Lay out the button's own children. The children render inside this wrapper
-     span, so the button-level `gap` never reaches them — without making the
-     wrapper itself a flex row, an icon + label (`<Button><svg/>Save</Button>`)
-     would render with no gap. Making `.content` a centered flex row lays out
-     multi-child buttons (icon+text, label+count) correctly after the #1589
-     migration, instead of needing per-button CSS to reach into `.content`. The
-     wrapper is shrink-to-fit, so a caller wanting a spread layout must also give
-     it width — e.g. a full-width button with
-     `.x :global(.content) { width: 100%; justify-content: space-between }`. */
-  .content {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--smrt-spacing-2);
-  }
-
-  .content.loading {
-    opacity: 0;
+    from {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+    to {
+      transform: translate(-50%, -50%) rotate(360deg);
+    }
   }
-
-  /* Disabled state */
-  .button:disabled,
-  .button.disabled {
+  .smrt-button__root:disabled,
+  .smrt-button__root.smrt-button__disabled {
     opacity: var(--smrt-state-disabled);
-    cursor: not-allowed;
-    pointer-events: none;
   }
-
-  /* Focus state */
-  .button:focus-visible {
+  .smrt-button__root:focus-visible {
     outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
     outline-offset: var(--smrt-focus-ring-offset);
   }
-
-  /* Phones: every size is at least a 44px touch target. */
-  @media (max-width: 48rem) {
-    .button {
-      min-block-size: 2.75rem;
-    }
-  }
-
-  /* Reduced motion */
   @media (prefers-reduced-motion: reduce) {
-    .spinner {
+    .smrt-button__spinner {
       animation: none;
     }
   }
-
-  .button[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
-  .button[data-density='comfortable'] { --smrt-control-target-min: 0px; }
-  .button { min-height: max(var(--smrt-control-height), var(--smrt-control-target-min, 0px)); min-width: var(--smrt-control-target-min, 0px); }
-  .button.sm { min-height: max(var(--smrt-control-height-small), var(--smrt-control-target-min, 0px)); }
 }
 </style>

package/dist/components/ui/Button.svelte.d.ts

@@ -24,7 +24,7 @@ export interface Props extends Omit<HTMLButtonAttributes, 'class' | 'href'> {
     /** Loading state */
     loading?: boolean;
     /**
-     * Extra class(es) appended after the base `button {variant} {size}` styling.
+     * Extra class(es) appended after the base `button smrt-button__{variant} smrt-button__{size}` styling.
      * Lets callers adopt Button for custom-styled buttons without losing their
      * own CSS (issue #1589) — the base button styling still applies.
      */

package/dist/components/ui/Card.svelte

@@ -30,22 +30,22 @@ const {
 </script>
 
 <div
-  class="card {variant} padding-{padding}"
-  class:hoverable
+  class="smrt-card__root smrt-card__{variant} smrt-card__padding-{padding}"
+  class:smrt-card__hoverable={hoverable}
   {...rest} data-smrt-component="Card"
 >
   {#if header}
-    <div class="card-header" data-smrt-part="header">
+    <div class="smrt-card__header" data-smrt-part="header">
       {@render header()}
     </div>
   {/if}
 
-  <div class="card-content" data-smrt-part="body">
+  <div class="smrt-card__content" data-smrt-part="body">
     {@render children?.()}
   </div>
 
   {#if footer}
-    <div class="card-footer" data-smrt-part="footer">
+    <div class="smrt-card__footer" data-smrt-part="footer">
       {@render footer()}
     </div>
   {/if}
@@ -53,6 +53,38 @@ const {
 
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.structure {
+  .smrt-card__padding-none .smrt-card__content {
+    padding: var(--smrt-spacing-0);
+  }
+  .smrt-card__padding-sm .smrt-card__content {
+    padding: var(--smrt-spacing-4);
+  }
+  .smrt-card__padding-md .smrt-card__content {
+    padding: var(--smrt-spacing-6);
+  }
+  .smrt-card__padding-lg .smrt-card__content {
+    padding: var(--smrt-spacing-8);
+  }
+  .smrt-card__header {
+    padding: var(--smrt-spacing-6);
+  }
+  .smrt-card__padding-sm .smrt-card__header {
+    padding: var(--smrt-spacing-4);
+  }
+  .smrt-card__padding-lg .smrt-card__header {
+    padding: var(--smrt-spacing-8);
+  }
+  .smrt-card__footer {
+    padding: var(--smrt-spacing-6);
+  }
+  .smrt-card__padding-sm .smrt-card__footer {
+    padding: var(--smrt-spacing-4);
+  }
+  .smrt-card__padding-lg .smrt-card__footer {
+    padding: var(--smrt-spacing-8);
+  }
+}
 @layer smrt.theme {
   /*
    * Themeable look (app-level custom properties; defaults keep the stock look):
@@ -62,80 +94,35 @@ const {
    *   --smrt-card-divider     rule between the header/footer and the content
    * The `outlined` variant always draws its outline.
    */
-  .card {
+  .smrt-card__root {
     background: var(--smrt-card-background, var(--smrt-surface-panel));
     border-radius: var(--smrt-radius-medium);
     transition: all var(--smrt-duration-short2) var(--smrt-easing-standard);
   }
-
-  /* Variants */
-  .default {
+  .smrt-card__default {
     border: var(--smrt-card-border, var(--smrt-hairline));
     box-shadow: var(--smrt-card-shadow, var(--smrt-inset-highlight));
   }
-
-  .outlined {
+  .smrt-card__outlined {
     border: var(--smrt-hairline-strong);
     box-shadow: var(--smrt-inset-highlight);
   }
-
-  .elevated {
+  .smrt-card__elevated {
     border: var(--smrt-card-border, var(--smrt-hairline));
     box-shadow: var(--smrt-inset-highlight), var(--smrt-elevation-2);
   }
-
-  /* Hoverable state */
-  .hoverable:hover {
+  .smrt-card__hoverable:hover {
     box-shadow: var(--smrt-inset-highlight), var(--smrt-elevation-3);
     transform: translateY(-2px);
   }
-
-  /* Padding */
-  .padding-none .card-content {
-    padding: var(--smrt-spacing-0);
-  }
-
-  .padding-sm .card-content {
-    padding: var(--smrt-spacing-4);
-  }
-
-  .padding-md .card-content {
-    padding: var(--smrt-spacing-6);
-  }
-
-  .padding-lg .card-content {
-    padding: var(--smrt-spacing-8);
-  }
-
-  /* Header */
-  .card-header {
-    padding: var(--smrt-spacing-6);
+  .smrt-card__header {
     border-bottom: var(--smrt-card-divider, var(--smrt-hairline));
   }
-
-  .padding-sm .card-header {
-    padding: var(--smrt-spacing-4);
-  }
-
-  .padding-lg .card-header {
-    padding: var(--smrt-spacing-8);
-  }
-
-  /* Footer */
-  .card-footer {
-    padding: var(--smrt-spacing-6);
+  .smrt-card__footer {
     border-top: var(--smrt-card-divider, var(--smrt-hairline));
     background: var(--smrt-surface-sunken);
     border-bottom-left-radius: var(--smrt-radius-medium);
     border-bottom-right-radius: var(--smrt-radius-medium);
   }
-
-  .padding-sm .card-footer {
-    padding: var(--smrt-spacing-4);
-  }
-
-  .padding-lg .card-footer {
-    padding: var(--smrt-spacing-8);
-  }
 }
 </style>