@scattered-light/loomiere-mojave 0.2.0 → 0.3.0

package/dist/exports/design-system/components/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _base_ui_react_field from '@base-ui/react/field';
+import * as _base_ui_react_button from '@base-ui/react/button';
 import { Button as Button$1 } from '@base-ui/react/button';
 import * as _base_ui_react_input from '@base-ui/react/input';
 import { Input as Input$1 } from '@base-ui/react/input';
@@ -39,10 +40,20 @@ type ButtonProps = React.ComponentProps<typeof Button$1> & {
 };
 /**
  * Base UI [Button](https://base-ui.com/react/components/button) with design-system `Button` classes.
- * Icon-only buttons must include a visible label for assistive tech (`aria-label` or `aria-labelledby`).
+ * A button holding only an icon gets `data-icon-only` and is drawn square (a circle, with the pill
+ * corners). Icon-only buttons must include a label for assistive tech (`aria-label` or `aria-labelledby`).
  */
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
+type IconButtonProps = React.ComponentProps<typeof Button$1>;
+/**
+ * A small, quiet icon-only button: the icon-button concept (the X that closes a dialog, a field's
+ * clear button) as a part of its own, for calendar arrows, row actions and other controls that a
+ * full Button would make too loud. Base UI [Button](https://base-ui.com/react/components/button)
+ * with the `IconButton` class. Always give it `aria-label` or `aria-labelledby`.
+ */
+declare const IconButton: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_button.ButtonProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
 type InputProps = React.ComponentProps<typeof Input$1>;
 /**
  * Base UI [Input](https://base-ui.com/react/components/input) with design-system `Input` classes.
@@ -104,4 +115,4 @@ type FieldControlProps = React.ComponentProps<typeof Field.Control>;
 type FieldValidityProps = React.ComponentProps<typeof Field.Validity>;
 type FieldItemProps = React.ComponentProps<typeof Field.Item>;
 
-export { Button, type ButtonProps, Field, type FieldControlProps, type FieldDescriptionProps, type FieldErrorProps, type FieldItemProps, type FieldLabelProps, type FieldRootProps, type FieldValidityProps, Fieldset, FieldsetDescription, type FieldsetDescriptionProps, type FieldsetLegendProps, type FieldsetRootProps, Form, FormActions, type FormActionsProps, type FormProps, Input, type InputProps, NavigationMenu, type NavigationMenuListProps, type NavigationMenuRootProps, cn, cnState };
+export { Button, type ButtonProps, Field, type FieldControlProps, type FieldDescriptionProps, type FieldErrorProps, type FieldItemProps, type FieldLabelProps, type FieldRootProps, type FieldValidityProps, Fieldset, FieldsetDescription, type FieldsetDescriptionProps, type FieldsetLegendProps, type FieldsetRootProps, Form, FormActions, type FormActionsProps, type FormProps, IconButton, type IconButtonProps, Input, type InputProps, NavigationMenu, type NavigationMenuListProps, type NavigationMenuRootProps, cn, cnState };

package/dist/exports/tokens.dtcg.json

@@ -10741,9 +10741,9 @@
     }
   },
   "popover": {
-    "popup-max-width": {
-      "$value": "400px",
-      "$description": "Keeps longer text to a readable line length."
+    "text-max-width": {
+      "$value": "{measure.narrow}",
+      "$description": "Keeps the title and description to a readable line length. The popup itself has no fixed cap, so wider content such as a calendar or a form fits; it stops at the space Base UI reports beside the trigger."
     },
     "popup-min-width": {
       "$value": "{popup.min-width}",

package/dist/tokens.css

@@ -778,7 +778,6 @@
     --sl-drawer-popup-max-size: 85vh; /** Tallest a bottom or top drawer gets, leaving the page visible above it. */
     --sl-navigation-menu-popup-min-width: 400px; /** Narrowest a navigation panel gets on wider screens, and the widest a single column of links grows. */
     --sl-navigation-menu-column-width: 12rem; /** Width of each column in a two-column link list. */
-    --sl-popover-popup-max-width: 400px; /** Keeps longer text to a readable line length. */
     --sl-preview-card-popup-min-width: 300px; /** Narrowest a preview card gets, so a short title still has room for its image. */
     --sl-preview-card-popup-max-width: 450px; /** Widest a preview card gets, so its description keeps a comfortable line length. */
     --sl-slider-vertical-height: 200px; /** Default length of a vertical slider. */
@@ -1723,6 +1722,7 @@
     --sl-avatar-size-xl: var(--sl-space-24); /** 96px, on a profile page. */
     --sl-drawer-handle-width: var(--sl-space-10); /** Grab bar length. */
     --sl-drawer-handle-height: var(--sl-space-1); /** Grab bar thickness. */
+    --sl-popover-text-max-width: var(--sl-measure-narrow); /** Keeps the title and description to a readable line length. The popup itself has no fixed cap, so wider content such as a calendar or a form fits; it stops at the space Base UI reports beside the trigger. */
     --sl-popover-popup-min-width: var(--sl-popup-min-width); /** Narrow enough for a short note, wide enough that a title doesn't wrap word by word. */
     --sl-slider-thumb-size: var(--sl-space-5); /** Knob diameter, big enough to grab with a finger on a 4px track. */
     --sl-switch-track-text-font-size: var(--sl-font-size-xs); /** Sized to the track, not a text style: the ON/OFF label has to fit inside the switch at each size. The rest of the label uses condense-subtitle-label. */

package/dist/tokens.d.ts

@@ -2414,7 +2414,7 @@ declare const tokens: {
     readonly "column-width": string;
   };
   readonly "popover": {
-    readonly "popup-max-width": string;
+    readonly "text-max-width": string;
     readonly "popup-min-width": string;
   };
   readonly "preview-card": {

package/dist/tokens.js

@@ -2414,7 +2414,7 @@ const tokens = {
     "column-width": "12rem"
   },
   "popover": {
-    "popup-max-width": "400px",
+    "text-max-width": "45ch",
     "popup-min-width": "200px"
   },
   "preview-card": {

package/dist/tokens.json

@@ -17770,11 +17770,12 @@
       "description": "Width of each column in a two-column link list."
     },
     {
-      "name": "--sl-popover-popup-max-width",
-      "path": "popover.popup-max-width",
+      "name": "--sl-popover-text-max-width",
+      "path": "popover.text-max-width",
       "layer": "component",
-      "value": "400px",
-      "description": "Keeps longer text to a readable line length."
+      "value": "45ch",
+      "references": "{measure.narrow}",
+      "description": "Keeps the title and description to a readable line length. The popup itself has no fixed cap, so wider content such as a calendar or a form fits; it stops at the space Base UI reports beside the trigger."
     },
     {
       "name": "--sl-popover-popup-min-width",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scattered-light/loomiere-mojave",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Mojave, the demo theme for Loomiere: desert stone and purple, built from one brand file.",
   "repository": {
     "type": "git",
@@ -61,6 +61,6 @@
     }
   },
   "devDependencies": {
-    "@scattered-light/loomiere": "0.2.0"
+    "@scattered-light/loomiere": "0.3.0"
   }
 }