@duskmoon-dev/core 1.19.4 → 1.19.6

package/dist/esm/components/alert.js

@@ -7,8 +7,11 @@ export const css = `/**
 @layer components {
   /* Base Alert */
   .alert {
-    display: flex;
-    align-items: flex-start;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    grid-template-areas:
+      "icon content actions close";
+    align-items: center;
     gap: 0.75rem;
     padding: 1rem;
     border-radius: var(--radius-sm);
@@ -19,6 +22,7 @@ export const css = `/**
 
   /* Alert Icon */
   .alert-icon {
+    grid-area: icon;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -26,10 +30,12 @@ export const css = `/**
     height: 1.5rem;
     font-size: 1.25rem;
     flex-shrink: 0;
+    align-self: start;
   }
 
   /* Alert Content */
   .alert-content {
+    grid-area: content;
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
@@ -37,13 +43,42 @@ export const css = `/**
     min-width: 0;
   }
 
+  .alert-content > p {
+    margin: 0;
+  }
+
+  /* Keep the compact single-message form vertically balanced against global typography margins. */
+  .alert > p {
+    margin: 0;
+  }
+
+  .alert-horizontal { display: grid; }
+  .alert-actions-end { grid-template-areas: "icon content actions close"; }
+  .alert-actions-bottom {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-areas:
+      "icon content close"
+      ". actions .";
+  }
+
+  .alert-actions-bottom .alert-actions {
+    justify-self: start;
+    margin-top: 0.5rem;
+  }
+  .alert-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+
   .alert-title {
+    margin: 0;
     font-size: 0.875rem;
     font-weight: 600;
     line-height: 1.25rem;
   }
 
   .alert-description {
+    margin: 0;
     font-size: 0.875rem;
     line-height: 1.25rem;
     opacity: 0.9;
@@ -51,6 +86,7 @@ export const css = `/**
 
   /* Alert Close Button */
   .alert-close {
+    grid-area: close;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -264,6 +300,7 @@ export const css = `/**
   /* Dismissible */
   .alert-dismissible {
     padding-right: 2.5rem;
+    padding-inline-end: 2.5rem;
     position: relative;
   }
 
@@ -271,6 +308,7 @@ export const css = `/**
     position: absolute;
     top: 0.75rem;
     right: 0.75rem;
+    inset-inline-end: 0.75rem;
   }
 
   /* Compact */
@@ -290,11 +328,25 @@ export const css = `/**
     font-size: 0.8125rem;
   }
 
+  .alert-comfortable {
+    padding: 1.25rem;
+    gap: 1rem;
+  }
+
   /* Alert Actions */
   .alert-actions {
+    grid-area: actions;
     display: flex;
     gap: 0.5rem;
-    margin-top: 0.5rem;
+    margin-top: 0;
+    flex-wrap: wrap;
+    align-self: center;
+    justify-self: end;
+  }
+
+  .alert-vertical .alert-actions {
+    align-self: stretch;
+    width: 100%;
   }
 
   .alert-filled .alert-actions .btn-text {
@@ -318,6 +370,32 @@ export const css = `/**
       transition: none;
     }
   }
+
+  @media (max-width: 32rem) {
+    .alert:not(.alert-vertical) .alert-content,
+    .alert-horizontal .alert-content {
+      flex-basis: min(100%, 18rem);
+    }
+    .alert:not(.alert-vertical),
+    .alert-horizontal {
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      grid-template-areas:
+        "icon content close"
+        ". actions actions";
+    }
+    .alert:not(.alert-vertical).alert-actions-end,
+    .alert-horizontal.alert-actions-end {
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      grid-template-areas:
+        "icon content close"
+        ". actions actions";
+    }
+    .alert:not(.alert-vertical) .alert-actions,
+    .alert-horizontal .alert-actions {
+      justify-self: start;
+      margin-top: 0.5rem;
+    }
+  }
 }
 `;
 

package/dist/esm/components/dialog.js

@@ -12,9 +12,10 @@ export const css = `/**
     margin: auto;
     padding: 0;
     border: none;
-    width: 100%;
+    width: calc(100% - 2rem);
     max-width: 28rem;
-    max-height: calc(100vh - 4rem);
+    max-height: calc(100dvh - 2rem);
+    box-sizing: border-box;
     background-color: var(--color-surface);
     color: var(--color-on-surface);
     border-radius: var(--radius-2xl);
@@ -31,7 +32,7 @@ export const css = `/**
   .dialog-box {
     display: flex;
     flex-direction: column;
-    max-height: calc(100vh - 4rem);
+    max-height: calc(100dvh - 2rem);
     overflow: hidden;
   }
 
@@ -90,6 +91,7 @@ export const css = `/**
   /* Dialog Footer */
   .dialog-footer {
     display: flex;
+    flex-wrap: wrap;
     justify-content: flex-end;
     gap: 0.5rem;
     padding: 1rem 1.5rem 1.5rem;
@@ -129,6 +131,30 @@ export const css = `/**
     margin: 0;
   }
 
+  @media (max-width: 640px) {
+    dialog.dialog {
+      width: calc(100% - 1rem);
+      max-height: calc(100dvh - 1rem);
+      border-radius: var(--radius-lg);
+    }
+
+    .dialog-box {
+      max-height: calc(100dvh - 1rem);
+    }
+
+    .dialog-header {
+      padding: 1rem 1rem 0;
+    }
+
+    .dialog-body {
+      padding: 1rem;
+    }
+
+    .dialog-footer {
+      padding: 0.75rem 1rem 1rem;
+    }
+  }
+
   dialog.dialog.dialog-fullscreen .dialog-box {
     max-height: 100%;
   }

package/dist/esm/components/dropdown.d.ts

@@ -0,0 +1,5 @@
+// Auto-generated type declaration for dropdown
+export declare const css: string;
+export declare const styles: CSSStyleSheet | null;
+declare const sheet: CSSStyleSheet | null;
+export default sheet;

package/dist/esm/components/dropdown.js

@@ -0,0 +1,100 @@
+// Auto-generated from dropdown.css
+export const css = `/**
+ * Dropdown Component Styles
+ * Native Popover disclosure with logical CSS anchor positioning.
+ */
+
+@layer components {
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .dropdown > .dropdown-content[popover] {
+    display: none;
+    position: fixed;
+    inset-block-start: auto;
+    inset-block-end: max(0.5rem, env(safe-area-inset-bottom, 0px));
+    inset-inline-start: auto;
+    inset-inline-end: max(
+      0.5rem,
+      env(safe-area-inset-left, 0px),
+      env(safe-area-inset-right, 0px)
+    );
+    z-index: 50;
+    min-inline-size: 12rem;
+    max-inline-size: min(24rem, calc(100dvw - 1rem));
+    max-block-size: calc(100dvh - 1rem);
+    margin: 0;
+    padding: 0.5rem;
+    overflow: auto;
+    color: var(--color-on-surface);
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-outline);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-lg);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateY(-0.5rem);
+    transition:
+      opacity 150ms ease-out,
+      transform 150ms ease-out,
+      overlay 150ms ease-out allow-discrete,
+      display 150ms ease-out allow-discrete;
+  }
+
+  .dropdown > .dropdown-content[popover]:popover-open {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  @starting-style {
+    .dropdown > .dropdown-content[popover]:popover-open {
+      opacity: 0;
+      transform: translateY(-0.5rem);
+    }
+  }
+
+  @supports (position-area: block-end) {
+    .dropdown > .dropdown-content[popover] {
+      inset: auto;
+      margin: 0.25rem;
+      position-area: block-end span-inline-end;
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    }
+
+    .dropdown.dropdown-block-start > .dropdown-content[popover] {
+      position-area: block-start span-inline-end;
+    }
+
+    .dropdown.dropdown-block-end > .dropdown-content[popover] {
+      position-area: block-end span-inline-end;
+    }
+
+    .dropdown.dropdown-inline-start > .dropdown-content[popover] {
+      position-area: inline-start span-block-end;
+    }
+
+    .dropdown.dropdown-inline-end > .dropdown-content[popover] {
+      position-area: inline-end span-block-end;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dropdown > .dropdown-content[popover] {
+      transition: none;
+    }
+  }
+}
+`;
+
+const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
+if (sheet) {
+  sheet.replaceSync(css);
+}
+export const styles = sheet;
+export default sheet;

package/dist/esm/components/fab.d.ts

@@ -0,0 +1,5 @@
+// Auto-generated type declaration for fab
+export declare const css: string;
+export declare const styles: CSSStyleSheet | null;
+declare const sheet: CSSStyleSheet | null;
+export default sheet;

package/dist/esm/components/fab.js

@@ -0,0 +1,191 @@
+// Auto-generated from fab.css
+export const css = `/**
+ * FAB / Speed Dial Component Styles
+ *
+ * FAB owns viewport placement and action layout. Pair its trigger and actions
+ * with Button classes for color, interaction, and disabled states.
+ */
+
+@layer components {
+  .fab {
+    --fab-offset-block: 1rem;
+    --fab-offset-inline: 1rem;
+    --fab-gap: 0.75rem;
+    --fab-size: 3.5rem;
+
+    position: fixed;
+    inset-block-end: calc(var(--fab-offset-block) + env(safe-area-inset-bottom, 0px));
+    inset-inline-end: calc(var(--fab-offset-inline) + env(safe-area-inset-right, 0px));
+    z-index: 40;
+    display: inline-flex;
+    flex-direction: column-reverse;
+    align-items: flex-end;
+    gap: var(--fab-gap);
+    max-inline-size: calc(100dvw - 2 * var(--fab-offset-inline));
+  }
+
+  .fab-start {
+    inset-inline-start: calc(var(--fab-offset-inline) + env(safe-area-inset-left, 0px));
+    inset-inline-end: auto;
+    align-items: flex-start;
+  }
+
+  .fab-contained {
+    position: absolute;
+  }
+
+  .fab-speed-dial {
+    flex-direction: column-reverse;
+  }
+
+  .fab-trigger {
+    min-inline-size: var(--fab-size);
+    min-block-size: var(--fab-size);
+    padding: 0.875rem;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .fab-trigger:not(.fab-extended) {
+    inline-size: var(--fab-size);
+    block-size: var(--fab-size);
+  }
+
+  .fab-extended {
+    inline-size: auto;
+    max-inline-size: 100%;
+    min-block-size: var(--fab-size);
+    padding-inline: 1.25rem;
+    border-radius: var(--radius-lg);
+  }
+
+  .fab-actions {
+    align-items: flex-end;
+    flex-direction: column-reverse;
+    gap: var(--fab-gap);
+    max-inline-size: min(22rem, calc(100dvw - 2rem));
+  }
+
+  .fab-start .fab-actions {
+    align-items: flex-start;
+  }
+
+  /* Controlled mode: application code owns .fab-open and all ARIA state. */
+  .fab-controlled > .fab-actions:not([popover]) {
+    display: none;
+  }
+
+  .fab-controlled.fab-open > .fab-actions:not([popover]) {
+    display: flex;
+  }
+
+  /* Native mode: the browser's popover state is the sole authority. */
+  .fab-actions[popover] {
+    display: none;
+    position: fixed;
+    inset-block-start: auto;
+    inset-block-end: calc(
+      var(--fab-offset-block, 1rem) + env(safe-area-inset-bottom, 0px) +
+      var(--fab-size, 3.5rem) + var(--fab-gap, 0.75rem)
+    );
+    inset-inline-start: auto;
+    inset-inline-end: calc(var(--fab-offset-inline, 1rem) + env(safe-area-inset-right, 0px));
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: visible;
+    color: inherit;
+    background: transparent;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateY(0.5rem);
+    transition:
+      opacity 150ms ease-out,
+      transform 150ms ease-out,
+      overlay 150ms ease-out allow-discrete,
+      display 150ms ease-out allow-discrete;
+  }
+
+  .fab-start > .fab-actions[popover] {
+    inset-inline-start: calc(var(--fab-offset-inline, 1rem) + env(safe-area-inset-left, 0px));
+    inset-inline-end: auto;
+  }
+
+  .fab-actions[popover]:popover-open {
+    display: flex;
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  @starting-style {
+    .fab-actions[popover]:popover-open {
+      opacity: 0;
+      transform: translateY(0.5rem);
+    }
+  }
+
+  @supports (position-area: top) {
+    .fab-actions[popover] {
+      inset: auto;
+      margin: var(--fab-gap, 0.75rem);
+      position-area: top span-left;
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    }
+
+    .fab-start > .fab-actions[popover] {
+      inset: auto;
+      position-area: top span-right;
+    }
+  }
+
+  .fab-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    max-inline-size: 100%;
+  }
+
+  .fab-start .fab-action {
+    flex-direction: row-reverse;
+  }
+
+  .fab-label {
+    max-inline-size: min(16rem, calc(100dvw - 6rem));
+    padding: 0.375rem 0.625rem;
+    overflow-wrap: anywhere;
+    color: var(--color-on-surface);
+    background-color: var(--color-surface-container-high);
+    border: 1px solid var(--color-outline-variant);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-sm);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.125rem;
+  }
+
+  @media (max-width: 30rem) {
+    .fab {
+      --fab-offset-block: 0.75rem;
+      --fab-offset-inline: 0.75rem;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .fab-actions[popover] {
+      transition: none;
+      transform: none;
+    }
+  }
+}
+`;
+
+const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
+if (sheet) {
+  sheet.replaceSync(css);
+}
+export const styles = sheet;
+export default sheet;

package/dist/esm/components/loading.d.ts

@@ -0,0 +1,5 @@
+// Auto-generated type declaration for loading
+export declare const css: string;
+export declare const styles: CSSStyleSheet | null;
+declare const sheet: CSSStyleSheet | null;
+export default sheet;

package/dist/esm/components/loading.js

@@ -0,0 +1,114 @@
+// Auto-generated from loading.css
+export const css = `/**
+ * Loading Component Styles
+ * CSS-only activity indicators. State, aria-busy, and disabling remain consumer-owned.
+ */
+
+@layer components {
+  .loading {
+    --loading-size: 1.25rem;
+    display: inline-flex;
+    width: var(--loading-size);
+    height: var(--loading-size);
+    flex: 0 0 var(--loading-size);
+    color: currentColor;
+    vertical-align: middle;
+  }
+
+  .loading-spinner {
+    border: max(2px, calc(var(--loading-size) / 8)) solid color-mix(in oklch, currentColor 25%, transparent);
+    border-top-color: currentColor;
+    border-radius: var(--radius-full);
+    animation: loading-spin 800ms linear infinite;
+  }
+
+  .loading-dots,
+  .loading-bars {
+    align-items: center;
+    justify-content: center;
+    gap: max(2px, calc(var(--loading-size) / 8));
+  }
+
+  .loading-dots::before,
+  .loading-dots::after,
+  .loading-bars::before,
+  .loading-bars::after {
+    content: "";
+    display: block;
+    background: currentColor;
+  }
+
+  .loading-dots::before,
+  .loading-dots::after {
+    width: 25%;
+    height: 25%;
+    border-radius: var(--radius-full);
+    box-shadow: calc(var(--loading-size) / 3) 0 currentColor;
+    animation: loading-dots 900ms ease-in-out infinite;
+  }
+
+  .loading-dots::after {
+    display: none;
+  }
+
+  .loading-bars {
+    padding-inline: 10%;
+  }
+
+  .loading-bars::before,
+  .loading-bars::after {
+    width: 18%;
+    height: 65%;
+    border-radius: var(--radius-xs);
+    box-shadow: calc(var(--loading-size) / 3) 0 currentColor, calc(var(--loading-size) * 2 / 3) 0 currentColor;
+    animation: loading-bars 900ms ease-in-out infinite;
+  }
+
+  .loading-bars::after {
+    display: none;
+  }
+
+  .loading-xs { --loading-size: 0.75rem; }
+  .loading-sm { --loading-size: 1rem; }
+  .loading-md { --loading-size: 1.25rem; }
+  .loading-lg { --loading-size: 1.75rem; }
+  .loading-xl { --loading-size: 2.5rem; }
+
+  .loading-primary { color: var(--color-primary); }
+  .loading-secondary { color: var(--color-secondary); }
+  .loading-tertiary { color: var(--color-tertiary); }
+  .loading-info { color: var(--color-info); }
+  .loading-success { color: var(--color-success); }
+  .loading-warning { color: var(--color-warning); }
+  .loading-error { color: var(--color-error); }
+
+  @keyframes loading-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes loading-dots {
+    0%, 100% { opacity: 0.35; transform: scale(0.75); }
+    50% { opacity: 1; transform: scale(1); }
+  }
+
+  @keyframes loading-bars {
+    0%, 100% { opacity: 0.35; transform: scaleY(0.65); }
+    50% { opacity: 1; transform: scaleY(1); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .loading-spinner,
+    .loading-dots::before,
+    .loading-bars::before {
+      animation: none;
+    }
+  }
+}
+`;
+
+const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
+if (sheet) {
+  sheet.replaceSync(css);
+}
+export const styles = sheet;
+export default sheet;