@duskmoon-dev/core 1.19.5 → 1.19.6

package/dist/components/index.css

@@ -721,6 +721,308 @@
 }
 
 
+/* Action composition components */
+/**
+ * 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;
+    }
+  }
+}
+
+/**
+ * Swap Component Styles
+ * Displays one of two non-interactive state indicators.
+ */
+
+@layer components {
+  .swap {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .swap-input {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .swap-on,
+  .swap-off {
+    grid-area: 1 / 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: max-content;
+    max-inline-size: 100%;
+    transition: opacity 150ms ease-out, transform 150ms ease-out;
+  }
+
+  .swap-on {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .swap-off {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: none;
+  }
+
+  .swap-input:checked ~ .swap-on,
+  .swap[aria-pressed="true"] > .swap-on {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .swap-input:checked ~ .swap-off,
+  .swap[aria-pressed="true"] > .swap-off {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  .swap:focus-visible,
+  .swap:has(.swap-input:focus-visible) {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+    border-radius: var(--radius-sm);
+  }
+
+  .swap:disabled,
+  .swap:has(.swap-input:disabled) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .swap-input:disabled {
+    cursor: not-allowed;
+  }
+
+  .swap-rotate .swap-on {
+    transform: rotate(-90deg) scale(0.8);
+  }
+
+  .swap-rotate .swap-off {
+    transform: rotate(0deg) scale(1);
+  }
+
+  .swap-rotate .swap-input:checked ~ .swap-on,
+  .swap-rotate[aria-pressed="true"] > .swap-on {
+    transform: rotate(0deg) scale(1);
+  }
+
+  .swap-rotate .swap-input:checked ~ .swap-off,
+  .swap-rotate[aria-pressed="true"] > .swap-off {
+    transform: rotate(90deg) scale(0.8);
+  }
+
+  /* Presentation-only override. It intentionally wins over semantic state. */
+  .swap.swap-active > .swap-on {
+    opacity: 1;
+    visibility: visible;
+    transform: rotate(0deg) scale(1);
+  }
+
+  .swap.swap-active > .swap-off {
+    opacity: 0;
+    visibility: hidden;
+    transform: rotate(90deg) scale(0.8);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .swap-on,
+    .swap-off {
+      transition: none;
+    }
+  }
+}
+
+
 /* Card Component */
 /**
  * Card Component Styles
@@ -2825,12 +3127,106 @@
 
 
 
-/* Navigation Component - includes navbar, menu, breadcrumbs, tabs, pagination, dropdown */
+/* Navigation Component - retains the legacy Dropdown import contract */
 /**
  * Navigation Component Styles
  * DuskMoonUI - Material Design 3 inspired navigation system
  */
 
+/* Preserve the Navigation entrypoint's published Dropdown coverage. */
+/**
+ * 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;
+    }
+  }
+}
+
+
 @layer components {
   /* Navbar Base */
   .navbar {
@@ -3417,60 +3813,6 @@
     font-size: 1rem;
   }
 
-  /* Dropdown */
-  .dropdown {
-    position: relative;
-    display: inline-block;
-  }
-
-  .dropdown-content {
-    position: absolute;
-    z-index: 50;
-    min-width: 12rem;
-    padding: 0.5rem;
-    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;
-    transform: translateY(-0.5rem);
-    transition: all 150ms ease-in-out;
-  }
-
-  .dropdown:hover .dropdown-content,
-  .dropdown:focus-within .dropdown-content,
-  .dropdown.dropdown-open .dropdown-content {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-  }
-
-  /* Dropdown Positions */
-  .dropdown-end .dropdown-content {
-    right: 0;
-  }
-
-  .dropdown-top .dropdown-content {
-    bottom: 100%;
-    top: auto;
-    margin-bottom: 0.25rem;
-  }
-
-  .dropdown-left .dropdown-content {
-    right: 100%;
-    left: auto;
-    top: 0;
-    margin-right: 0.25rem;
-  }
-
-  .dropdown-right .dropdown-content {
-    left: 100%;
-    right: auto;
-    top: 0;
-    margin-left: 0.25rem;
-  }
-
   /* Pagination */
   .pagination {
     display: flex;
@@ -3714,7 +4056,7 @@
     position: relative;
     z-index: 1;
     max-width: 32rem;
-    max-height: calc(100vh - 5rem);
+    max-height: calc(100dvh - 5rem);
     padding: 1.5rem;
     background-color: var(--color-surface);
     color: var(--color-on-surface);
@@ -3749,6 +4091,7 @@
   .modal-action,
   .modal-footer {
     display: flex;
+    flex-wrap: wrap;
     justify-content: flex-end;
     gap: 0.5rem;
     margin-top: 1.5rem;
@@ -3922,7 +4265,7 @@
 
     .modal-responsive .modal-box {
       max-width: 100%;
-      max-height: 90vh;
+      max-height: 90dvh;
       margin: 0;
       border-radius: var(--radius-lg) var(--radius-lg) 0 0;
     }
@@ -3937,7 +4280,7 @@
 
   .drawer-modal .modal-box {
     max-width: 20rem;
-    max-height: 100vh;
+    max-height: 100dvh;
     height: 100%;
     margin: 0;
     border-radius: 0;
@@ -12994,9 +13337,10 @@
     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);
@@ -13013,7 +13357,7 @@
   .dialog-box {
     display: flex;
     flex-direction: column;
-    max-height: calc(100vh - 4rem);
+    max-height: calc(100dvh - 2rem);
     overflow: hidden;
   }
 
@@ -13072,6 +13416,7 @@
   /* Dialog Footer */
   .dialog-footer {
     display: flex;
+    flex-wrap: wrap;
     justify-content: flex-end;
     gap: 0.5rem;
     padding: 1rem 1.5rem 1.5rem;
@@ -13111,6 +13456,30 @@
     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/components/modal.css

@@ -30,7 +30,7 @@
     position: relative;
     z-index: 1;
     max-width: 32rem;
-    max-height: calc(100vh - 5rem);
+    max-height: calc(100dvh - 5rem);
     padding: 1.5rem;
     background-color: var(--color-surface);
     color: var(--color-on-surface);
@@ -65,6 +65,7 @@
   .modal-action,
   .modal-footer {
     display: flex;
+    flex-wrap: wrap;
     justify-content: flex-end;
     gap: 0.5rem;
     margin-top: 1.5rem;
@@ -238,7 +239,7 @@
 
     .modal-responsive .modal-box {
       max-width: 100%;
-      max-height: 90vh;
+      max-height: 90dvh;
       margin: 0;
       border-radius: var(--radius-lg) var(--radius-lg) 0 0;
     }
@@ -253,7 +254,7 @@
 
   .drawer-modal .modal-box {
     max-width: 20rem;
-    max-height: 100vh;
+    max-height: 100dvh;
     height: 100%;
     margin: 0;
     border-radius: 0;