npm - @scattered-light/loomiere-mojave - Versions diffs - 0.3.0 → 0.4.0 - Mend

@scattered-light/loomiere-mojave 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/dist/utilities.css CHANGED Viewed

@@ -3,266 +3,239 @@
 /* Text styles: one class per text style token. */
 /* Body copy in the base tier, the default UI and body text. */
-.text-style-base {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+.text-style-body-base {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
 }
 /* The selected or current item in the base tier (the default UI and body text): selected tabs and toggles, the current nav item or page. Base body text at semibold, so selection reads without changing size. */
-.text-style-base-selected {
-  font-family: var(--sl-font-base-selected-font-family);
-  font-size: var(--sl-font-base-selected-font-size);
-  font-weight: var(--sl-font-base-selected-font-weight);
-  line-height: var(--sl-font-base-selected-line-height);
-  letter-spacing: var(--sl-font-base-selected-letter-spacing);
+.text-style-selected-base {
+  font-family: var(--sl-font-selected-base-font-family);
+  font-size: var(--sl-font-selected-base-font-size);
+  font-weight: var(--sl-font-selected-base-font-weight);
+  line-height: var(--sl-font-selected-base-line-height);
+  letter-spacing: var(--sl-font-selected-base-letter-spacing);
 }
 /* Form labels in the base tier, the default UI and body text. */
-.text-style-base-label {
-  font-family: var(--sl-font-base-label-font-family);
-  font-size: var(--sl-font-base-label-font-size);
-  font-weight: var(--sl-font-base-label-font-weight);
-  line-height: var(--sl-font-base-label-line-height);
-  letter-spacing: var(--sl-font-base-label-letter-spacing);
+.text-style-label-base {
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
 }
 /* Links in the base tier. The same type as base body text: a link stands out by color and underline, not by its type. */
-.text-style-base-link {
-  font-family: var(--sl-font-base-link-font-family);
-  font-size: var(--sl-font-base-link-font-size);
-  font-weight: var(--sl-font-base-link-font-weight);
-  line-height: var(--sl-font-base-link-line-height);
-  letter-spacing: var(--sl-font-base-link-letter-spacing);
+.text-style-link-base {
+  font-family: var(--sl-font-link-base-font-family);
+  font-size: var(--sl-font-link-base-font-size);
+  font-weight: var(--sl-font-link-base-font-weight);
+  line-height: var(--sl-font-link-base-line-height);
+  letter-spacing: var(--sl-font-link-base-letter-spacing);
 }
 /* Subtitles in the base tier, the default UI and body text. */
-.text-style-base-subtitle {
-  font-family: var(--sl-font-base-subtitle-font-family);
-  font-size: var(--sl-font-base-subtitle-font-size);
-  font-weight: var(--sl-font-base-subtitle-font-weight);
-  line-height: var(--sl-font-base-subtitle-line-height);
-  letter-spacing: var(--sl-font-base-subtitle-letter-spacing);
+.text-style-subtitle-base {
+  font-family: var(--sl-font-subtitle-base-font-family);
+  font-size: var(--sl-font-subtitle-base-font-size);
+  font-weight: var(--sl-font-subtitle-base-font-weight);
+  line-height: var(--sl-font-subtitle-base-line-height);
+  letter-spacing: var(--sl-font-subtitle-base-letter-spacing);
 }
 /* Buttons and triggers in the base tier, the default UI and body text. */
-.text-style-base-trigger {
-  font-family: var(--sl-font-base-trigger-font-family);
-  font-size: var(--sl-font-base-trigger-font-size);
-  font-weight: var(--sl-font-base-trigger-font-weight);
-  line-height: var(--sl-font-base-trigger-line-height);
-  letter-spacing: var(--sl-font-base-trigger-letter-spacing);
+.text-style-trigger-base {
+  font-family: var(--sl-font-trigger-base-font-family);
+  font-size: var(--sl-font-trigger-base-font-size);
+  font-weight: var(--sl-font-trigger-base-font-weight);
+  line-height: var(--sl-font-trigger-base-line-height);
+  letter-spacing: var(--sl-font-trigger-base-letter-spacing);
+}
+/* Titles in the base tier: a toast, an accordion row, a list item heading. Titles use the display family; the tier sets the size. */
+.text-style-title-base {
+  font-family: var(--sl-font-title-base-font-family);
+  font-size: var(--sl-font-title-base-font-size);
+  font-weight: var(--sl-font-title-base-font-weight);
+  line-height: var(--sl-font-title-base-line-height);
+  letter-spacing: var(--sl-font-title-base-letter-spacing);
 }
 /* Code uses the mono family so characters line up. */
-.text-style-code {
-  font-family: var(--sl-font-code-font-family);
-  font-size: var(--sl-font-code-font-size);
-  font-weight: var(--sl-font-code-font-weight);
-  line-height: var(--sl-font-code-line-height);
-  letter-spacing: var(--sl-font-code-letter-spacing);
+.text-style-code-condense {
+  font-family: var(--sl-font-code-condense-font-family);
+  font-size: var(--sl-font-code-condense-font-size);
+  font-weight: var(--sl-font-code-condense-font-weight);
+  line-height: var(--sl-font-code-condense-line-height);
+  letter-spacing: var(--sl-font-code-condense-letter-spacing);
 }
 /* Body copy in the condense tier, dense UI text (tables, secondary labels). */
-.text-style-condense {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+.text-style-body-condense {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
 }
 /* Buttons and triggers in the condense tier (dense UI): condense body text at medium, like base-trigger one tier down. */
-.text-style-condense-trigger {
-  font-family: var(--sl-font-condense-trigger-font-family);
-  font-size: var(--sl-font-condense-trigger-font-size);
-  font-weight: var(--sl-font-condense-trigger-font-weight);
-  line-height: var(--sl-font-condense-trigger-line-height);
-  letter-spacing: var(--sl-font-condense-trigger-letter-spacing);
+.text-style-trigger-condense {
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
 }
 /* The selected or current item in the condense tier (dense UI text): selected tabs and toggles, the current nav item or page. Condense body text at semibold, so selection reads without changing size. */
-.text-style-condense-selected {
-  font-family: var(--sl-font-condense-selected-font-family);
-  font-size: var(--sl-font-condense-selected-font-size);
-  font-weight: var(--sl-font-condense-selected-font-weight);
-  line-height: var(--sl-font-condense-selected-line-height);
-  letter-spacing: var(--sl-font-condense-selected-letter-spacing);
+.text-style-selected-condense {
+  font-family: var(--sl-font-selected-condense-font-family);
+  font-size: var(--sl-font-selected-condense-font-size);
+  font-weight: var(--sl-font-selected-condense-font-weight);
+  line-height: var(--sl-font-selected-condense-line-height);
+  letter-spacing: var(--sl-font-selected-condense-letter-spacing);
 }
 /* Links in the condense tier. The same type as condense body text: a link stands out by color and underline, not by its type. */
-.text-style-condense-link {
-  font-family: var(--sl-font-condense-link-font-family);
-  font-size: var(--sl-font-condense-link-font-size);
-  font-weight: var(--sl-font-condense-link-font-weight);
-  line-height: var(--sl-font-condense-link-line-height);
-  letter-spacing: var(--sl-font-condense-link-letter-spacing);
+.text-style-link-condense {
+  font-family: var(--sl-font-link-condense-font-family);
+  font-size: var(--sl-font-link-condense-font-size);
+  font-weight: var(--sl-font-link-condense-font-weight);
+  line-height: var(--sl-font-link-condense-line-height);
+  letter-spacing: var(--sl-font-link-condense-letter-spacing);
 }
 /* Subtitles in the condense tier, dense UI text (tables, secondary labels). */
-.text-style-condense-subtitle {
-  font-family: var(--sl-font-condense-subtitle-font-family);
-  font-size: var(--sl-font-condense-subtitle-font-size);
-  font-weight: var(--sl-font-condense-subtitle-font-weight);
-  line-height: var(--sl-font-condense-subtitle-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-letter-spacing);
+.text-style-subtitle-condense {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
 }
 /* Small uppercase eyebrow labels in the condense tier, dense UI text (tables, secondary labels). */
-.text-style-condense-subtitle-label {
-  font-family: var(--sl-font-condense-subtitle-label-font-family);
-  font-size: var(--sl-font-condense-subtitle-label-font-size);
-  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
-  line-height: var(--sl-font-condense-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+.text-style-eyebrow-condense {
+  font-family: var(--sl-font-eyebrow-condense-font-family);
+  font-size: var(--sl-font-eyebrow-condense-font-size);
+  font-weight: var(--sl-font-eyebrow-condense-font-weight);
+  line-height: var(--sl-font-eyebrow-condense-line-height);
+  letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-condense-text-transform);
+}
+/* Titles in the condense tier: group headers in tables, menus and dense panels. Titles use the display family; the tier sets the size. */
+.text-style-title-condense {
+  font-family: var(--sl-font-title-condense-font-family);
+  font-size: var(--sl-font-title-condense-font-size);
+  font-weight: var(--sl-font-title-condense-font-weight);
+  line-height: var(--sl-font-title-condense-line-height);
+  letter-spacing: var(--sl-font-title-condense-letter-spacing);
 }
 /* Body copy in the magnify tier, emphasized body text (lead paragraphs). */
-.text-style-magnify {
-  font-family: var(--sl-font-magnify-font-family);
-  font-size: var(--sl-font-magnify-font-size);
-  font-weight: var(--sl-font-magnify-font-weight);
-  line-height: var(--sl-font-magnify-line-height);
-  letter-spacing: var(--sl-font-magnify-letter-spacing);
+.text-style-body-magnify {
+  font-family: var(--sl-font-body-magnify-font-family);
+  font-size: var(--sl-font-body-magnify-font-size);
+  font-weight: var(--sl-font-body-magnify-font-weight);
+  line-height: var(--sl-font-body-magnify-line-height);
+  letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 /* Buttons and triggers in the magnify tier (emphasized, larger UI): magnify body text at medium, like base-trigger one tier up. */
-.text-style-magnify-trigger {
-  font-family: var(--sl-font-magnify-trigger-font-family);
-  font-size: var(--sl-font-magnify-trigger-font-size);
-  font-weight: var(--sl-font-magnify-trigger-font-weight);
-  line-height: var(--sl-font-magnify-trigger-line-height);
-  letter-spacing: var(--sl-font-magnify-trigger-letter-spacing);
+.text-style-trigger-magnify {
+  font-family: var(--sl-font-trigger-magnify-font-family);
+  font-size: var(--sl-font-trigger-magnify-font-size);
+  font-weight: var(--sl-font-trigger-magnify-font-weight);
+  line-height: var(--sl-font-trigger-magnify-line-height);
+  letter-spacing: var(--sl-font-trigger-magnify-letter-spacing);
+}
+/* Titles in the magnify tier: popovers, cards and fieldsets. Titles use the display family; the tier sets the size. */
+.text-style-title-magnify {
+  font-family: var(--sl-font-title-magnify-font-family);
+  font-size: var(--sl-font-title-magnify-font-size);
+  font-weight: var(--sl-font-title-magnify-font-weight);
+  line-height: var(--sl-font-title-magnify-line-height);
+  letter-spacing: var(--sl-font-title-magnify-letter-spacing);
 }
 /* Body copy in the minimize tier, the smallest functional text (captions, fine print). */
-.text-style-minimize {
-  font-family: var(--sl-font-minimize-font-family);
-  font-size: var(--sl-font-minimize-font-size);
-  font-weight: var(--sl-font-minimize-font-weight);
-  line-height: var(--sl-font-minimize-line-height);
-  letter-spacing: var(--sl-font-minimize-letter-spacing);
+.text-style-body-minimize {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
 }
 /* Buttons and triggers in the minimize tier (the smallest UI): minimize body text at medium, like base-trigger one tier down. */
-.text-style-minimize-trigger {
-  font-family: var(--sl-font-minimize-trigger-font-family);
-  font-size: var(--sl-font-minimize-trigger-font-size);
-  font-weight: var(--sl-font-minimize-trigger-font-weight);
-  line-height: var(--sl-font-minimize-trigger-line-height);
-  letter-spacing: var(--sl-font-minimize-trigger-letter-spacing);
+.text-style-trigger-minimize {
+  font-family: var(--sl-font-trigger-minimize-font-family);
+  font-size: var(--sl-font-trigger-minimize-font-size);
+  font-weight: var(--sl-font-trigger-minimize-font-weight);
+  line-height: var(--sl-font-trigger-minimize-line-height);
+  letter-spacing: var(--sl-font-trigger-minimize-letter-spacing);
 }
 /* The selected or current item in the minimize tier (the smallest functional text): selected tabs and toggles, the current nav item or page. Minimize body text at semibold, so selection reads without changing size. */
-.text-style-minimize-selected {
-  font-family: var(--sl-font-minimize-selected-font-family);
-  font-size: var(--sl-font-minimize-selected-font-size);
-  font-weight: var(--sl-font-minimize-selected-font-weight);
-  line-height: var(--sl-font-minimize-selected-line-height);
-  letter-spacing: var(--sl-font-minimize-selected-letter-spacing);
+.text-style-selected-minimize {
+  font-family: var(--sl-font-selected-minimize-font-family);
+  font-size: var(--sl-font-selected-minimize-font-size);
+  font-weight: var(--sl-font-selected-minimize-font-weight);
+  line-height: var(--sl-font-selected-minimize-line-height);
+  letter-spacing: var(--sl-font-selected-minimize-letter-spacing);
 }
 /* Links in the minimize tier. The same type as minimize body text: a link stands out by color and underline, not by its type. */
-.text-style-minimize-link {
-  font-family: var(--sl-font-minimize-link-font-family);
-  font-size: var(--sl-font-minimize-link-font-size);
-  font-weight: var(--sl-font-minimize-link-font-weight);
-  line-height: var(--sl-font-minimize-link-line-height);
-  letter-spacing: var(--sl-font-minimize-link-letter-spacing);
+.text-style-link-minimize {
+  font-family: var(--sl-font-link-minimize-font-family);
+  font-size: var(--sl-font-link-minimize-font-size);
+  font-weight: var(--sl-font-link-minimize-font-weight);
+  line-height: var(--sl-font-link-minimize-line-height);
+  letter-spacing: var(--sl-font-link-minimize-letter-spacing);
 }
 /* Subtitles in the minimize tier, the smallest functional text (captions, fine print). */
-.text-style-minimize-subtitle {
-  font-family: var(--sl-font-minimize-subtitle-font-family);
-  font-size: var(--sl-font-minimize-subtitle-font-size);
-  font-weight: var(--sl-font-minimize-subtitle-font-weight);
-  line-height: var(--sl-font-minimize-subtitle-line-height);
-  letter-spacing: var(--sl-font-minimize-subtitle-letter-spacing);
+.text-style-subtitle-minimize {
+  font-family: var(--sl-font-subtitle-minimize-font-family);
+  font-size: var(--sl-font-subtitle-minimize-font-size);
+  font-weight: var(--sl-font-subtitle-minimize-font-weight);
+  line-height: var(--sl-font-subtitle-minimize-line-height);
+  letter-spacing: var(--sl-font-subtitle-minimize-letter-spacing);
 }
 /* Small uppercase eyebrow labels in the minimize tier, the smallest functional text (captions, fine print). */
-.text-style-minimize-subtitle-label {
-  font-family: var(--sl-font-minimize-subtitle-label-font-family);
-  font-size: var(--sl-font-minimize-subtitle-label-font-size);
-  font-weight: var(--sl-font-minimize-subtitle-label-font-weight);
-  line-height: var(--sl-font-minimize-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-minimize-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-minimize-subtitle-label-text-transform);
-}
-/* Display text at 2xl, for headings and hero copy. */
-.text-style-maximize-2xl {
-  font-family: var(--sl-font-maximize-2xl-font-family);
-  font-size: var(--sl-font-maximize-2xl-font-size);
-  font-weight: var(--sl-font-maximize-2xl-font-weight);
-  line-height: var(--sl-font-maximize-2xl-line-height);
-  letter-spacing: var(--sl-font-maximize-2xl-letter-spacing);
-}
-/* Display text at 3xl, for headings and hero copy. */
-.text-style-maximize-3xl {
-  font-family: var(--sl-font-maximize-3xl-font-family);
-  font-size: var(--sl-font-maximize-3xl-font-size);
-  font-weight: var(--sl-font-maximize-3xl-font-weight);
-  line-height: var(--sl-font-maximize-3xl-line-height);
-  letter-spacing: var(--sl-font-maximize-3xl-letter-spacing);
-}
-/* Display text at 4xl, for headings and hero copy. */
-.text-style-maximize-4xl {
-  font-family: var(--sl-font-maximize-4xl-font-family);
-  font-size: var(--sl-font-maximize-4xl-font-size);
-  font-weight: var(--sl-font-maximize-4xl-font-weight);
-  line-height: var(--sl-font-maximize-4xl-line-height);
-  letter-spacing: var(--sl-font-maximize-4xl-letter-spacing);
-}
-/* Display text at lg, for headings and hero copy. */
-.text-style-maximize-lg {
-  font-family: var(--sl-font-maximize-lg-font-family);
-  font-size: var(--sl-font-maximize-lg-font-size);
-  font-weight: var(--sl-font-maximize-lg-font-weight);
-  line-height: var(--sl-font-maximize-lg-line-height);
-  letter-spacing: var(--sl-font-maximize-lg-letter-spacing);
-}
-/* Display text at md, for headings and hero copy. */
-.text-style-maximize-md {
-  font-family: var(--sl-font-maximize-md-font-family);
-  font-size: var(--sl-font-maximize-md-font-size);
-  font-weight: var(--sl-font-maximize-md-font-weight);
-  line-height: var(--sl-font-maximize-md-line-height);
-  letter-spacing: var(--sl-font-maximize-md-letter-spacing);
-}
-/* Display text at sm, for headings and hero copy. */
-.text-style-maximize-sm {
-  font-family: var(--sl-font-maximize-sm-font-family);
-  font-size: var(--sl-font-maximize-sm-font-size);
-  font-weight: var(--sl-font-maximize-sm-font-weight);
-  line-height: var(--sl-font-maximize-sm-line-height);
-  letter-spacing: var(--sl-font-maximize-sm-letter-spacing);
-}
-/* Display text at xl, for headings and hero copy. */
-.text-style-maximize-xl {
-  font-family: var(--sl-font-maximize-xl-font-family);
-  font-size: var(--sl-font-maximize-xl-font-size);
-  font-weight: var(--sl-font-maximize-xl-font-weight);
-  line-height: var(--sl-font-maximize-xl-line-height);
-  letter-spacing: var(--sl-font-maximize-xl-letter-spacing);
-}
-/* Display text at xs, for headings and hero copy. */
-.text-style-maximize-xs {
-  font-family: var(--sl-font-maximize-xs-font-family);
-  font-size: var(--sl-font-maximize-xs-font-size);
-  font-weight: var(--sl-font-maximize-xs-font-weight);
-  line-height: var(--sl-font-maximize-xs-line-height);
-  letter-spacing: var(--sl-font-maximize-xs-letter-spacing);
+.text-style-eyebrow-minimize {
+  font-family: var(--sl-font-eyebrow-minimize-font-family);
+  font-size: var(--sl-font-eyebrow-minimize-font-size);
+  font-weight: var(--sl-font-eyebrow-minimize-font-weight);
+  line-height: var(--sl-font-eyebrow-minimize-line-height);
+  letter-spacing: var(--sl-font-eyebrow-minimize-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-minimize-text-transform);
+}
+/* Titles in the amplify tier: dialogs, drawers and page sections. Titles use the display family; the tier sets the size. */
+.text-style-title-amplify {
+  font-family: var(--sl-font-title-amplify-font-family);
+  font-size: var(--sl-font-title-amplify-font-size);
+  font-weight: var(--sl-font-title-amplify-font-weight);
+  line-height: var(--sl-font-title-amplify-line-height);
+  letter-spacing: var(--sl-font-title-amplify-letter-spacing);
+}
+/* Titles in the maximize tier: the page head. Titles use the display family; the tier sets the size. */
+.text-style-title-maximize {
+  font-family: var(--sl-font-title-maximize-font-family);
+  font-size: var(--sl-font-title-maximize-font-size);
+  font-weight: var(--sl-font-title-maximize-font-weight);
+  line-height: var(--sl-font-title-maximize-line-height);
+  letter-spacing: var(--sl-font-title-maximize-letter-spacing);
 }
 /* Responsive visibility from the breakpoint tokens. */

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@scattered-light/loomiere-mojave",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Mojave, the demo theme for Loomiere: desert stone and purple, built from one brand file.",
   "repository": {
     "type": "git",
@@ -46,6 +46,7 @@
     "build": "loomiere build",
     "studio": "loomiere studio",
     "lab": "loomiere lab",
+    "figma": "loomiere figma push",
     "prepack": "loomiere build"
   },
   "publishConfig": {
@@ -61,6 +62,6 @@
     }
   },
   "devDependencies": {
-    "@scattered-light/loomiere": "0.3.0"
+    "@scattered-light/loomiere": "0.4.0"
   }
 }

package/dist/exports/design-system/components/IconButton/README.md DELETED Viewed

@@ -1,31 +0,0 @@
-# IconButton
-The Base UI Button styled by the theme. A small, quiet icon-only button: the icon-button concept (tokens/semantic/icon-button.json), the same look as the X that closes a dialog or toast, as a part of its own. For calendar arrows, row actions and clear buttons, where a Button would be too loud. No component tokens.
-Use `Loomiere.IconButton`, this package's wrapper: it puts the class names on for you (`import { IconButton } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Button`.
-Base UI docs: https://base-ui.com/react/components/button
-## Classes
-| Class | Data attributes it answers to |
-|---|---|
-| `IconButton` |   |
-Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
-## Example
-From the IconButton stories (`Default`):
-```tsx
-export const Default: Story = {
-  render: () => (
-    <IconButton type="button" aria-label="Next month">
-      <Icon name="chevron_right" />
-    </IconButton>
-  ),
-};
-```
-The preview also shows `CalendarHeader`, `RowActions`, `Disabled`.

package/dist/exports/design-system/components/IconButton/preview.html DELETED Viewed

@@ -1,19 +0,0 @@
-<!-- @dsCard group="Actions" height=480 subtitle="Default / CalendarHeader / RowActions / Disabled" -->
-<!doctype html>
-<html>
-<head>
-<meta charset="utf-8">
-<style>
-  body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
-  #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
-</style>
-</head>
-<body>
-<div id="root"></div>
-<script>
-(()=>{var x=Object.create;var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var I=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),v=(e,t)=>{for(var o in t)m(e,o,{get:t[o],enumerable:!0})},E=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of g(t))!w.call(e,a)&&a!==o&&m(e,a,{get:()=>t[a],enumerable:!(s=f(t,a))||s.enumerable});return e};var B=(e,t,o)=>(o=e!=null?x(h(e)):{},E(t||!e||!e.__esModule?m(o,"default",{value:e,enumerable:!0}):o,e));var u=I((F,y)=>{y.exports=window.Loomiere});var p={};v(p,{CalendarHeader:()=>N,Default:()=>D,Disabled:()=>A,RowActions:()=>R,default:()=>d});var r=B(u(),1);var i=window.React;function n(e,t,o){let{children:s,...a}=t||{};return o!==void 0&&(a.key=o),s===void 0?i.createElement(e,a):Array.isArray(s)?i.createElement(e,a,...s):i.createElement(e,a,s)}var M=i.Fragment;var S={title:"Components/Lib/IconButton",component:r.IconButton,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},d=S,c=({name:e})=>n("span",{className:"material-symbols-outlined","aria-hidden":"true",children:e}),D={render:()=>n(r.IconButton,{type:"button","aria-label":"Next month",children:n(c,{name:"chevron_right"})})},N={render:()=>n("div",{style:{display:"flex",alignItems:"center",gap:"var(--sl-space-2)",width:"280px"},children:[n(r.IconButton,{type:"button","aria-label":"Previous month",children:n(c,{name:"chevron_left"})}),n("span",{className:"text-style-base-subtitle",style:{flexGrow:1,textAlign:"center"},children:"October 2026"}),n(r.IconButton,{type:"button","aria-label":"Next month",children:n(c,{name:"chevron_right"})})]})},R={render:()=>n("div",{style:{display:"flex",gap:"var(--sl-space-1)"},children:[n(r.IconButton,{type:"button","aria-label":"Edit",children:n(c,{name:"edit"})}),n(r.IconButton,{type:"button","aria-label":"Duplicate",children:n(c,{name:"content_copy"})}),n(r.IconButton,{type:"button","aria-label":"Delete",children:n(c,{name:"delete"})})]})},A={render:()=>n(r.IconButton,{type:"button","aria-label":"Next month",disabled:!0,children:n(c,{name:"chevron_right"})})};var l=window.React,b=d||{},_=["Default","CalendarHeader","RowActions","Disabled"];function j({id:e}){let t=p[e],o={...b.args||{},...t.args||{}};return(t.render||(a=>l.createElement(b.component,a)))(o,{args:o,id:e,name:e})}var O=_.map(e=>l.createElement("section",{key:e,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(j,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,O));})();
-</script>
-</body>
-</html>