@signal9/era-ui 3.5.1 → 3.7.0

package/dist/generated-docs/logo.md

@@ -0,0 +1,24 @@
+# Logo
+
+The signalnine dish mark, reactive to a state preset.
+
+## Import
+
+```ts
+import { Logo } from "$lib/ui/logo";
+```
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `depth?` | `number` | `52` | — |
+| `tilt?` | `number` | `55` | — |
+| `aim?` | `number` | `0` | — |
+| `light?` | `number` | `REST_LIGHT` | — |
+| `inset?` | `number` | `100` | — |
+| `palette?` | `LogoPalette` | `'amber'` | — |
+| `state?` | `LogoState` | `'manual'` | 'manual' renders a static pose; any other state animates its preset. |
+| `size?` | `number` | `272` | — |
+| `pressable?` | `boolean` | `false` | Deepen the bowl while held, then spring back on release. |
+| `class?` | `string` | — | — |

package/dist/generated-docs/manifest.json

@@ -646,6 +646,17 @@
       ],
       "file": "label.md"
     },
+    {
+      "slug": "logo",
+      "title": "Logo",
+      "summary": "The signalnine dish mark, reactive to a state preset.",
+      "tokenEstimate": 176,
+      "sections": [
+        "Import",
+        "Props"
+      ],
+      "file": "logo.md"
+    },
     {
       "slug": "menu",
       "title": "Menu",

package/dist/styles/density.css

@@ -273,6 +273,11 @@
  * root while dense subtrees just inherit whatever corners are in force. */
 :root {
 	--era-roundness-scale: 1;
+	/* The password mask glyph is a corner decision too — see the corners block
+	 * below. Declared here on :root alone for the same reason as the scale: a
+	 * data-mode subtree must not re-assert it and defeat an inherited
+	 * data-corners="square". */
+	--era-mask-glyph: disc;
 }
 :root,
 [data-mode='dense'] {
@@ -313,6 +318,10 @@
 /* -------------------------------------------------- */
 [data-corners='square'] {
 	--era-roundness-scale: 0;
+	/* Squares the password mask too, so the one glyph the UA picks for you
+	 * follows the same corner language as every rendered box. Unlike the radius
+	 * this can't tween — it's a keyword, so it flips at the end of the toggle. */
+	--era-mask-glyph: square;
 }
 
 /* Animate the roundness scale itself — not border-radius. sp changes snap

package/dist/styles/index.css

@@ -34,6 +34,33 @@
 	stroke-width: var(--era-icon-stroke-width);
 }
 
+/* The mask glyph is the one piece of type the UA picks for you, so era picks it
+ * instead — off the CORNERS axis, like every other corner in the system:
+ * rounded → disc, data-corners="square" → square. The token lives in
+ * density.css next to --era-roundness-scale.
+ *
+ * `:where()` holds specificity at 0, so a consumer opts out with a bare
+ * `input[type='password'] { -webkit-text-security: disc }`. Author origin beats
+ * the UA sheet regardless of specificity, so this still wins by default.
+ *
+ * Engines without the property keep their own dots — masking never degrades to
+ * plaintext, only to a different glyph.
+ *
+ * KNOWN LIMIT, verified in Chromium 1228: a real input[type=password] ignores
+ * this entirely and always draws disc. Author CSS does not win — square, circle
+ * and none all render dots — and CSS.supports() reports true for every one of
+ * them, so it fails silently. The property DOES apply to input[type=text], and
+ * the var() substitutes correctly, so this rule is live wiring rather than dead
+ * code: point it at a text input and the axis drives the glyph.
+ *
+ * Forcing squares on a password field therefore means rendering it as
+ * type="text" and masking it ourselves, which costs password-manager detection
+ * and the screen-reader "password" announcement. Deliberately not done — the
+ * semantics are worth more than the corner. */
+:where(input[type='password']) {
+	-webkit-text-security: var(--era-mask-glyph, disc);
+}
+
 /* Shared interactive-state recipe: quiet focus, disabled affordance.
  * Equivalent to `focus:outline-none disabled:cursor-not-allowed disabled:opacity-50`.
  *

package/dist/ui/index.d.ts

@@ -48,6 +48,8 @@ export { Input, Textarea } from './input/index.js';
 export { KV } from './kv/index.js';
 export { Label } from './label/index.js';
 export * as LinkPreview from './link-preview/index.js';
+export { Logo } from './logo/index.js';
+export type { LogoPalette, LogoState, LogoParams } from './logo/index.js';
 export { Mode } from './mode/index.js';
 export { Pane, Root as PaneRoot, Handle as PaneHandle, Content as PaneContent, Close as PaneClose, Tabs as PaneTabs, TabList as PaneTabList, Tab as PaneTab, TabPanel as PaneTabPanel } from './pane/index.js';
 export * as Pagination from './pagination/index.js';

package/dist/ui/index.js

@@ -48,6 +48,7 @@ export { Input, Textarea } from './input/index.js';
 export { KV } from './kv/index.js';
 export { Label } from './label/index.js';
 export * as LinkPreview from './link-preview/index.js';
+export { Logo } from './logo/index.js';
 export { Mode } from './mode/index.js';
 export { Pane, Root as PaneRoot, Handle as PaneHandle, Content as PaneContent, Close as PaneClose, Tabs as PaneTabs, TabList as PaneTabList, Tab as PaneTab, TabPanel as PaneTabPanel } from './pane/index.js';
 export * as Pagination from './pagination/index.js';

package/dist/ui/logo/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Logo } from './logo.svelte';
+export { LOGO_STATES, PAL, PALETTES, SPR, REST_LIGHT, FIXED_STEP, wrap, clamp, norm360, oklchToHex, renderLogoMarkup, logoSvgDocument, createSim, integrate, stateFrame } from './logo.svelte';
+export type { LogoPalette, LogoState, LogoParams, LogoSim, HueOverride, Ring, Dof, Fx } from './logo.svelte';

package/dist/ui/logo/index.js

@@ -0,0 +1,2 @@
+export { default as Logo } from './logo.svelte';
+export { LOGO_STATES, PAL, PALETTES, SPR, REST_LIGHT, FIXED_STEP, wrap, clamp, norm360, oklchToHex, renderLogoMarkup, logoSvgDocument, createSim, integrate, stateFrame } from './logo.svelte';