@duskmoon-dev/core 1.19.1 → 1.19.3

package/README.md

@@ -442,4 +442,4 @@ See [specs/004-oklch-color-system/quickstart.md](./specs/004-oklch-color-system/
 
 MIT
 
-<!-- release 34185365594 -->
+<!-- release 34867104439 -->

package/dist/components/footer.css

@@ -0,0 +1,48 @@
+/**
+ * Footer Composition Primitive
+ * Responsive, content-neutral groups on an MD3 surface.
+ */
+
+@layer components {
+  .footer {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
+    gap: var(--footer-gap, 2rem);
+    width: 100%;
+    padding: var(--footer-padding, 2rem);
+    background-color: var(--color-surface-container-low);
+    color: var(--color-on-surface);
+  }
+
+  .footer > :where(nav, section, div):not(.footer-horizontal):not(.footer-vertical) {
+    display: grid;
+    align-content: start;
+    gap: 0.75rem;
+  }
+
+  .footer-title {
+    color: var(--color-on-surface-variant);
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .footer-center {
+    place-items: center;
+    text-align: center;
+  }
+
+  .footer-horizontal {
+    grid-template-columns: none;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .footer-vertical {
+    grid-template-columns: minmax(0, 1fr);
+    grid-auto-flow: row;
+  }
+}

package/dist/components/hero.css

@@ -0,0 +1,57 @@
+/**
+ * Hero Composition Primitive
+ * Layers a content region and an optional presentation-neutral overlay.
+ */
+
+@layer components {
+  .hero {
+    display: grid;
+    width: 100%;
+    min-width: 0;
+    place-items: center;
+    isolation: isolate;
+  }
+
+  .hero > * {
+    grid-area: 1 / 1;
+  }
+
+  .hero-content {
+    z-index: 1;
+    display: flex;
+    width: min(100%, var(--hero-content-max-width, 80rem));
+    min-width: 0;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .hero-overlay {
+    z-index: 0;
+    align-self: stretch;
+    justify-self: stretch;
+    pointer-events: none;
+  }
+
+  .hero-center {
+    justify-items: center;
+    text-align: center;
+  }
+
+  .hero-start {
+    justify-items: start;
+    text-align: start;
+  }
+
+  .hero-end {
+    justify-items: end;
+    text-align: end;
+  }
+
+  .hero-start > .hero-content {
+    justify-content: flex-start;
+  }
+
+  .hero-end > .hero-content {
+    justify-content: flex-end;
+  }
+}

package/dist/components/index.css

@@ -15794,6 +15794,411 @@
   }
 }
 
+/**
+ * Footer Composition Primitive
+ * Responsive, content-neutral groups on an MD3 surface.
+ */
+
+@layer components {
+  .footer {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
+    gap: var(--footer-gap, 2rem);
+    width: 100%;
+    padding: var(--footer-padding, 2rem);
+    background-color: var(--color-surface-container-low);
+    color: var(--color-on-surface);
+  }
+
+  .footer > :where(nav, section, div):not(.footer-horizontal):not(.footer-vertical) {
+    display: grid;
+    align-content: start;
+    gap: 0.75rem;
+  }
+
+  .footer-title {
+    color: var(--color-on-surface-variant);
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .footer-center {
+    place-items: center;
+    text-align: center;
+  }
+
+  .footer-horizontal {
+    grid-template-columns: none;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .footer-vertical {
+    grid-template-columns: minmax(0, 1fr);
+    grid-auto-flow: row;
+  }
+}
+
+/**
+ * Hero Composition Primitive
+ * Layers a content region and an optional presentation-neutral overlay.
+ */
+
+@layer components {
+  .hero {
+    display: grid;
+    width: 100%;
+    min-width: 0;
+    place-items: center;
+    isolation: isolate;
+  }
+
+  .hero > * {
+    grid-area: 1 / 1;
+  }
+
+  .hero-content {
+    z-index: 1;
+    display: flex;
+    width: min(100%, var(--hero-content-max-width, 80rem));
+    min-width: 0;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .hero-overlay {
+    z-index: 0;
+    align-self: stretch;
+    justify-self: stretch;
+    pointer-events: none;
+  }
+
+  .hero-center {
+    justify-items: center;
+    text-align: center;
+  }
+
+  .hero-start {
+    justify-items: start;
+    text-align: start;
+  }
+
+  .hero-end {
+    justify-items: end;
+    text-align: end;
+  }
+
+  .hero-start > .hero-content {
+    justify-content: flex-start;
+  }
+
+  .hero-end > .hero-content {
+    justify-content: flex-end;
+  }
+}
+
+/**
+ * Indicator Composition Primitive
+ * Positions arbitrary content around an inline-sized anchor.
+ */
+
+@layer components {
+  .indicator {
+    position: relative;
+    display: inline-grid;
+    width: max-content;
+    max-width: 100%;
+  }
+
+  .indicator-item {
+    --indicator-block: 0%;
+    --indicator-inline: 0%;
+    --indicator-x: 50%;
+    --indicator-y: -50%;
+    position: absolute;
+    z-index: 1;
+    inset-block-start: var(--indicator-block);
+    inset-inline-end: var(--indicator-inline);
+    translate: var(--indicator-x) var(--indicator-y);
+  }
+
+  .indicator-top {
+    --indicator-block: 0%;
+    --indicator-y: -50%;
+  }
+
+  .indicator-middle {
+    --indicator-block: 50%;
+    --indicator-y: -50%;
+  }
+
+  .indicator-bottom {
+    --indicator-block: 100%;
+    --indicator-y: -50%;
+  }
+
+  .indicator-start {
+    --indicator-inline: 100%;
+    --indicator-x: 50%;
+  }
+
+  .indicator-center {
+    --indicator-inline: 50%;
+    --indicator-x: 50%;
+  }
+
+  .indicator-end {
+    --indicator-inline: 0%;
+    --indicator-x: 50%;
+  }
+
+  :dir(rtl) .indicator-item {
+    --indicator-x: -50%;
+  }
+
+  :dir(rtl) .indicator-start {
+    --indicator-x: -50%;
+  }
+}
+
+/**
+ * Join Composition Primitive
+ * Visually connects arbitrary adjacent controls.
+ */
+
+@layer components {
+  .join {
+    display: inline-flex;
+    align-items: stretch;
+    flex-direction: row;
+    width: max-content;
+    max-width: 100%;
+    vertical-align: middle;
+  }
+
+  .join > .join-item {
+    position: relative;
+    flex: 0 1 auto;
+  }
+
+  .join > .join-item:hover,
+  .join > .join-item:focus,
+  .join > .join-item:focus-within {
+    z-index: 1;
+  }
+
+  :is(.join, .join-horizontal) > .join-item:not(:first-child) {
+    margin-inline-start: -1px;
+  }
+
+  :is(.join, .join-horizontal) > .join-item:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+
+  :is(.join, .join-horizontal) > .join-item:first-child:not(:last-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :is(.join, .join-horizontal) > .join-item:last-child:not(:first-child) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  .join-vertical {
+    flex-direction: column;
+  }
+
+  .join-vertical > .join-item {
+    margin-inline-start: 0;
+  }
+
+  .join-vertical > .join-item:not(:first-child) {
+    margin-block-start: -1px;
+  }
+
+  .join-vertical > .join-item:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+
+  .join-vertical > .join-item:first-child:not(:last-child) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .join-vertical > .join-item:last-child:not(:first-child) {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+}
+
+/**
+ * Mask Composition Primitive
+ * Small, dependency-free catalog of reusable clipping shapes.
+ */
+
+@layer components {
+  .mask {
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    vertical-align: middle;
+    object-fit: cover;
+  }
+
+  .mask-circle {
+    clip-path: circle(50% at 50% 50%);
+  }
+
+  .mask-squircle {
+    clip-path: inset(0 round 28%);
+  }
+
+  .mask-square {
+    clip-path: inset(0);
+  }
+
+  .mask-diamond {
+    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+  }
+
+  .mask-hexagon {
+    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
+  }
+
+  .mask-triangle {
+    clip-path: polygon(50% 0, 100% 100%, 0 100%);
+  }
+}
+
+/**
+ * Sidebar Layout Composition Primitive
+ * Persistent, responsive sidebar + content grid; application code owns state.
+ */
+
+@layer components {
+  .sidebar-layout {
+    --sidebar-layout-width: 17.5rem;
+    --sidebar-layout-compact-width: 5rem;
+    container-type: inline-size;
+    container-name: sidebar-layout;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-areas: "sidebar content";
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    background-color: var(--color-surface);
+    color: var(--color-on-surface);
+  }
+
+  .sidebar-layout-sidebar {
+    display: none;
+    grid-area: sidebar;
+    width: var(--sidebar-layout-width);
+    min-width: 0;
+    overflow: hidden;
+    background-color: var(--color-surface-container-low);
+    color: var(--color-on-surface);
+    border-inline-end: 1px solid var(--color-outline-variant);
+  }
+
+  .sidebar-layout-content {
+    grid-area: content;
+    min-width: 0;
+  }
+
+  .sidebar-layout-start {
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-areas: "sidebar content";
+  }
+
+  .sidebar-layout-end {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: "content sidebar";
+  }
+
+  .sidebar-layout-end > .sidebar-layout-sidebar {
+    border-inline-start: 1px solid var(--color-outline-variant);
+    border-inline-end: 0;
+  }
+
+  @container sidebar-layout (min-width: 48rem) {
+    .sidebar-layout-sidebar {
+      display: block;
+    }
+  }
+
+  .sidebar-layout-compact > .sidebar-layout-sidebar {
+    width: var(--sidebar-layout-compact-width);
+  }
+
+  .sidebar-layout-hidden > .sidebar-layout-sidebar {
+    display: none;
+  }
+}
+
+/**
+ * Stack Composition Primitive
+ * Overlaps arbitrary children in one intrinsic CSS Grid area.
+ */
+
+@layer components {
+  .stack {
+    --stack-inline-offset: 0;
+    --stack-block-offset: 0.375rem;
+    display: inline-grid;
+    place-items: stretch;
+    isolation: isolate;
+  }
+
+  .stack > * {
+    grid-area: 1 / 1;
+    position: relative;
+    min-width: 0;
+  }
+
+  .stack > :first-child {
+    z-index: 3;
+  }
+
+  .stack > :nth-child(2) {
+    z-index: 2;
+    inset-inline-start: var(--stack-inline-offset);
+    inset-block-start: var(--stack-block-offset);
+  }
+
+  .stack > :nth-child(n + 3) {
+    z-index: 1;
+    inset-inline-start: calc(var(--stack-inline-offset) * 2);
+    inset-block-start: calc(var(--stack-block-offset) * 2);
+  }
+
+  .stack-top {
+    --stack-inline-offset: 0;
+    --stack-block-offset: -0.375rem;
+  }
+
+  .stack-bottom {
+    --stack-inline-offset: 0;
+    --stack-block-offset: 0.375rem;
+  }
+
+  .stack-start {
+    --stack-inline-offset: -0.375rem;
+    --stack-block-offset: 0;
+  }
+
+  .stack-end {
+    --stack-inline-offset: 0.375rem;
+    --stack-block-offset: 0;
+  }
+}
+
 /**
  * Home Page Layout
  * App-bar-led public application shell driven by its containing width.

package/dist/components/indicator.css

@@ -0,0 +1,63 @@
+/**
+ * Indicator Composition Primitive
+ * Positions arbitrary content around an inline-sized anchor.
+ */
+
+@layer components {
+  .indicator {
+    position: relative;
+    display: inline-grid;
+    width: max-content;
+    max-width: 100%;
+  }
+
+  .indicator-item {
+    --indicator-block: 0%;
+    --indicator-inline: 0%;
+    --indicator-x: 50%;
+    --indicator-y: -50%;
+    position: absolute;
+    z-index: 1;
+    inset-block-start: var(--indicator-block);
+    inset-inline-end: var(--indicator-inline);
+    translate: var(--indicator-x) var(--indicator-y);
+  }
+
+  .indicator-top {
+    --indicator-block: 0%;
+    --indicator-y: -50%;
+  }
+
+  .indicator-middle {
+    --indicator-block: 50%;
+    --indicator-y: -50%;
+  }
+
+  .indicator-bottom {
+    --indicator-block: 100%;
+    --indicator-y: -50%;
+  }
+
+  .indicator-start {
+    --indicator-inline: 100%;
+    --indicator-x: 50%;
+  }
+
+  .indicator-center {
+    --indicator-inline: 50%;
+    --indicator-x: 50%;
+  }
+
+  .indicator-end {
+    --indicator-inline: 0%;
+    --indicator-x: 50%;
+  }
+
+  :dir(rtl) .indicator-item {
+    --indicator-x: -50%;
+  }
+
+  :dir(rtl) .indicator-start {
+    --indicator-x: -50%;
+  }
+}

package/dist/components/join.css

@@ -0,0 +1,70 @@
+/**
+ * Join Composition Primitive
+ * Visually connects arbitrary adjacent controls.
+ */
+
+@layer components {
+  .join {
+    display: inline-flex;
+    align-items: stretch;
+    flex-direction: row;
+    width: max-content;
+    max-width: 100%;
+    vertical-align: middle;
+  }
+
+  .join > .join-item {
+    position: relative;
+    flex: 0 1 auto;
+  }
+
+  .join > .join-item:hover,
+  .join > .join-item:focus,
+  .join > .join-item:focus-within {
+    z-index: 1;
+  }
+
+  :is(.join, .join-horizontal) > .join-item:not(:first-child) {
+    margin-inline-start: -1px;
+  }
+
+  :is(.join, .join-horizontal) > .join-item:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+
+  :is(.join, .join-horizontal) > .join-item:first-child:not(:last-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :is(.join, .join-horizontal) > .join-item:last-child:not(:first-child) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  .join-vertical {
+    flex-direction: column;
+  }
+
+  .join-vertical > .join-item {
+    margin-inline-start: 0;
+  }
+
+  .join-vertical > .join-item:not(:first-child) {
+    margin-block-start: -1px;
+  }
+
+  .join-vertical > .join-item:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+
+  .join-vertical > .join-item:first-child:not(:last-child) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .join-vertical > .join-item:last-child:not(:first-child) {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+}

package/dist/components/mask.css

@@ -0,0 +1,38 @@
+/**
+ * Mask Composition Primitive
+ * Small, dependency-free catalog of reusable clipping shapes.
+ */
+
+@layer components {
+  .mask {
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    vertical-align: middle;
+    object-fit: cover;
+  }
+
+  .mask-circle {
+    clip-path: circle(50% at 50% 50%);
+  }
+
+  .mask-squircle {
+    clip-path: inset(0 round 28%);
+  }
+
+  .mask-square {
+    clip-path: inset(0);
+  }
+
+  .mask-diamond {
+    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+  }
+
+  .mask-hexagon {
+    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
+  }
+
+  .mask-triangle {
+    clip-path: polygon(50% 0, 100% 100%, 0 100%);
+  }
+}