@excom/valence 0.1.0

package/src/components/modal.css

@@ -0,0 +1,172 @@
+/**
+ * Modal (<dialog>)
+ */
+
+@custom-selector :--dialog-close .close, :is(:--link, :--button)[rel="prev"];
+
+/**
+ * Close control — `.close` or `:--button` / `:--link` with `rel="prev"`
+ * Renders the theme close icon (empty content).
+ * @cssclass close
+ */
+@define-mixin modal-close-control {
+  --v-modal-close-icon-size: calc(1rem * var(--v-line-height));
+  display: block;
+  float: right;
+  width: var(--v-modal-close-icon-size);
+  height: var(--v-modal-close-icon-size);
+  margin: calc(var(--v-spacing) * -1) 0 var(--v-spacing) auto;
+  padding: 0;
+  border: none;
+  background-image: var(--v-icon-close);
+  background-position: center;
+  /* Scale icon to line-height, cap at 1.25rem */
+  background-size: auto min(var(--v-modal-close-icon-size), 1.25rem);
+  background-repeat: no-repeat;
+  background-color: transparent;
+  opacity: 0.5;
+
+  transition: opacity var(--v-transition);
+
+  &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+    opacity: 1;
+  }
+}
+
+/**
+ * Dimmer for `dialog::backdrop` and `:--dialog-backdrop-aliases`
+ * (`[role="presentation"]` / `.tag-backdrop`): dialog child or drawer sibling.
+ */
+@define-mixin modal-backdrop {
+  display: block;
+  backdrop-filter: var(--v-modal-overlay-backdrop-filter);
+  background-color: var(--v-modal-overlay-background-color);
+  pointer-events: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  position: fixed;
+  overscroll-behavior: contain;
+}
+
+@define-mixin modal-inner {
+  width: 100%;
+  max-height: calc(100vh - var(--v-spacing) * 2);
+  /* mobile browsers: the visible viewport, not the one under the URL bar */
+  max-height: calc(100dvh - var(--v-spacing) * 2);
+  margin: var(--v-spacing);
+  overflow: auto;
+
+  @media (min-width: 576px) {
+    max-width: 510px;
+  }
+
+  @media (min-width: 768px) {
+    max-width: 700px;
+  }
+
+  @mixin abstract-wrapper {
+    > :--header {
+      > * {
+        margin-bottom: 0;
+      }
+
+      > :--dialog-close {
+        @mixin modal-close-control;
+        margin: 0;
+        margin-left: var(--v-spacing);
+        padding: 0;
+        float: right;
+      }
+    }
+
+    > :--footer {
+      text-align: right;
+
+      :--button {
+        margin-bottom: 0;
+
+        &:not(:first-of-type) {
+          margin-left: calc(var(--v-spacing) * 0.5);
+        }
+      }
+    }
+  }
+
+  @mixin abstract-wrapper {
+    > :--dialog-close {
+      @mixin modal-close-control;
+    }
+  }
+}
+
+@define-mixin module-modal {
+  :root,
+  :host {
+    --v-scrollbar-width: 0px;
+  }
+
+  :where(:has(> :--dialog.absolute)) {
+    /* Lowest specificity */
+    position: relative;
+    height: 600px;
+    width: 600px;
+    background-color: red;
+  }
+  :--dialog.absolute {
+    position: absolute;
+  }
+
+  :is(dialog)::backdrop,
+  :--dialog > :--dialog-backdrop-aliases {
+    @mixin modal-backdrop;
+    &:is(.absolute::backdrop),
+    &:is(.absolute > :--dialog-backdrop-aliases) {
+      position: absolute;
+    }
+  }
+  :is(dialog:modal),
+  :--dialog:has(> :--dialog-backdrop-aliases) {
+    /* Dialog scroll stays in the dialog, not the page behind it */
+    overscroll-behavior: contain;
+  }
+
+  :--dialog {
+    display: flex;
+    z-index: 999;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    align-items: center;
+    justify-content: center;
+    width: inherit;
+    min-width: 100%;
+    height: inherit;
+    min-height: 100%;
+    padding: 0;
+    border: 0;
+    color: var(--v-color);
+    background-color: transparent;
+    pointer-events: none;
+    > * {
+      pointer-events: auto;
+    }
+
+    /* Content */
+    @mixin abstract-wrapper {
+      > :--article {
+        @mixin modal-inner;
+      }
+    }
+
+    /* Closed state */
+    &:not(:--dialog--open) {
+      display: none;
+    }
+  }
+  /* TODO: modal animations */
+}

package/src/components/nav.css

@@ -0,0 +1,198 @@
+/**
+ * Nav. Reboot from sanitize.css v13.0.0 (CC0).
+ */
+
+@define-mixin module-nav {
+  /* Keep VoiceOver list semantics in Safari (opinionated) */
+  :where(:--nav :--li)::before {
+    float: left;
+    content: "\200B";
+  }
+
+  :--nav {
+    justify-content: space-between;
+    overflow: visible;
+    &,
+    :--list {
+      display: flex;
+    }
+    :--list {
+      align-items: center;
+      margin-bottom: 0;
+      padding: 0;
+      list-style: none;
+
+      &:first-of-type {
+        margin-left: calc(var(--v-nav-element-spacing-horizontal) * -1);
+      }
+      &:last-of-type {
+        margin-right: calc(var(--v-nav-element-spacing-horizontal) * -1);
+      }
+    }
+
+    :--li {
+      display: inline-block;
+      margin: 0;
+      padding: var(--v-nav-element-spacing-vertical)
+        var(--v-nav-element-spacing-horizontal);
+
+      :where(:--link) {
+        display: inline-block;
+        margin: calc(var(--v-nav-link-spacing-vertical) * -1)
+          calc(var(--v-nav-link-spacing-horizontal) * -1);
+        padding: var(--v-nav-link-spacing-vertical)
+          var(--v-nav-link-spacing-horizontal);
+        border-radius: var(--v-border-radius);
+
+        &:not(:hover) {
+          text-decoration: none;
+        }
+      }
+
+      /* Minimal support for buttons and form elements */
+      :--button,
+      input:not(
+        [type="checkbox"],
+        [type="radio"],
+        [type="range"],
+        [type="file"]
+      ),
+      select {
+        height: auto;
+        margin-right: inherit;
+        margin-bottom: 0;
+        margin-left: inherit;
+        padding: calc(
+            var(--v-nav-link-spacing-vertical) - (var(--v-border-width) * 2)
+          )
+          var(--v-nav-link-spacing-horizontal);
+      }
+    }
+
+    /* Breadcrumb */
+    &[aria-label="breadcrumb"] {
+      align-items: center;
+      justify-content: start;
+
+      & :--list :--li {
+        &:not(:first-child) {
+          margin-inline-start: var(--v-nav-link-spacing-horizontal);
+        }
+
+        :--link {
+          margin: calc(var(--v-nav-link-spacing-vertical) * -1) 0;
+          margin-inline-start: calc(var(--v-nav-link-spacing-horizontal) * -1);
+        }
+
+        &:not(:last-child) {
+          &::after {
+            display: inline-block;
+            position: absolute;
+            width: calc(var(--v-nav-link-spacing-horizontal) * 4);
+            margin: 0 calc(var(--v-nav-link-spacing-horizontal) * -1);
+            content: var(--v-nav-breadcrumb-divider);
+            color: var(--v-muted-color);
+            text-align: center;
+            text-decoration: none;
+            white-space: nowrap;
+          }
+        }
+      }
+
+      /* Minimal support for aria-current */
+      & :--link[aria-current]:not([aria-current="false"]) {
+        background-color: transparent;
+        color: inherit;
+        text-decoration: none;
+        pointer-events: none;
+      }
+    }
+  }
+
+  /* Vertical Nav */
+  :--aside {
+    display: block;
+
+    :--nav,
+    :--list,
+    :--li {
+      display: block;
+    }
+
+    :--li {
+      padding: calc(var(--v-nav-element-spacing-vertical) * 0.5)
+        var(--v-nav-element-spacing-horizontal);
+
+      :--link {
+        display: block;
+      }
+
+      /* Minimal support for links as buttons */
+      :--button {
+        margin: inherit;
+      }
+    }
+  }
+
+  /* Tree. Should be placed on list elements. */
+  :--list:--tree {
+    border-left: var(--v-border-width) solid var(--v-muted-border-color);
+    margin: 0 !important;
+    padding: 0 !important;
+    :--li {
+      margin: 0 !important;
+      padding: calc(var(--v-nav-element-spacing-vertical) * 0.25) 0 !important;
+      :--list:--tree {
+        /* sub-tree margin */
+        margin-left: calc(
+          var(--v-nav-element-spacing-horizontal) * 1.5
+        ) !important;
+      }
+    }
+    :--link,
+    :--details :--summary {
+      margin: 0;
+      padding: 0;
+      margin-left: calc(var(--v-border-width) * -1);
+      padding-left: calc(var(--v-nav-element-spacing-horizontal) * 1.5);
+    }
+    :--link {
+      border-left: var(--v-border-width) solid transparent;
+      border-radius: 0;
+      font-weight: 400;
+      transition:
+        background-color var(--v-transition),
+        color var(--v-transition),
+        box-shadow var(--v-transition),
+        border-color var(--v-transition),
+        font-weight var(--v-transition),
+        -webkit-text-decoration var(--v-transition);
+      &:hover {
+        border-color: var(--v-secondary-underline);
+      }
+      &[aria-current] {
+        border-color: var(--v-primary);
+        color: var(--v-primary-hover);
+        font-weight: 600;
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
+  /* Breadcrumb RTL */
+  [dir="rtl"] {
+    :--nav {
+      &[aria-label="breadcrumb"] {
+        & :--list :--li {
+          &:not(:last-child) {
+            ::after {
+              content: "\\";
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/popover.css

@@ -0,0 +1,83 @@
+/**
+ * Popover (`[popover]`).
+ *
+ * Override UA `position: fixed` centering with `position: absolute`,
+ * tethered via `position-anchor: auto` (implicit anchor from
+ * `popovertarget` / `showPopover({ source })`). `[data-placement]`
+ * picks the side (default: top).
+ *
+ *   <button popovertarget="tip">...</button>
+ *   <div id="tip" popover data-placement="bottom">Bubble content</div>
+ */
+
+@define-mixin module-popover {
+  *:has(> :--popover) {
+    anchor-scope: --v-popover-anchor;
+    anchor-name: --v-popover-anchor;
+  }
+  :--popover {
+    /* Override UA: position: fixed; inset: 0; margin: auto; */
+    position: absolute;
+    inset: auto;
+    margin: 0;
+    position-anchor: --v-popover-anchor;
+
+    z-index: 1;
+    max-width: min(
+      var(--v-popover-max-width),
+      calc(100vw - var(--v-spacing) * 2)
+    );
+    padding: var(--v-spacing);
+    border: 1px solid var(--v-popover-border-color);
+    border-radius: var(--v-border-radius);
+    background: var(--v-popover-background-color);
+    color: var(--v-popover-color);
+    box-shadow: var(--v-popover-box-shadow);
+    font-size: var(--v-font-size);
+    font-weight: normal;
+    text-wrap: pretty;
+    overflow-wrap: break-word;
+    opacity: 0;
+
+    transition:
+      display var(--v-transition) allow-discrete,
+      overlay var(--v-transition) allow-discrete,
+      opacity var(--v-transition);
+
+    &:--popover--open {
+      opacity: 1;
+    }
+
+    @starting-style {
+      &:--popover--open {
+        opacity: 0;
+      }
+    }
+
+    &::backdrop {
+      display: none;
+    }
+
+    /* Default + explicit top */
+    &:not([data-placement]),
+    &[data-placement="top"] {
+      position-area: top;
+      margin-bottom: calc(var(--v-spacing) * 0.5);
+    }
+
+    &[data-placement="bottom"] {
+      position-area: bottom;
+      margin-top: calc(var(--v-spacing) * 0.5);
+    }
+
+    &[data-placement="left"] {
+      position-area: left;
+      margin-right: calc(var(--v-spacing) * 0.5);
+    }
+
+    &[data-placement="right"] {
+      position-area: right;
+      margin-left: calc(var(--v-spacing) * 0.5);
+    }
+  }
+}

package/src/components/progress.css

@@ -0,0 +1,88 @@
+/**
+ * Progress
+ *
+ * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
+ */
+
+@define-mixin module-progress {
+  /* 1. Display in Edge 18- / IE
+     2. Vertical-align in Chrome, Edge, Firefox */
+  :--progress {
+    display: inline-block; /* 1 */
+    vertical-align: baseline; /* 2 */
+  }
+
+  :--progress {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    display: inline-block;
+    appearance: none;
+    width: 100%;
+    height: 0.5rem;
+    margin-bottom: calc(var(--v-spacing) * 0.5);
+    overflow: hidden;
+
+    border: 0;
+    border-radius: var(--v-border-radius);
+    background-color: var(--v-progress-background-color);
+
+    /* IE10 uses `color` to set the bar background-color */
+    color: var(--v-progress-color);
+
+    &::-webkit-progress-bar {
+      border-radius: var(--v-border-radius);
+      background: none;
+    }
+
+    /* Indeterminate state */
+    @media (prefers-reduced-motion: no-preference) {
+      &:--progress--indeterminate {
+        background: var(--v-progress-background-color)
+          linear-gradient(
+            to right,
+            var(--v-progress-color) 30%,
+            var(--v-progress-background-color) 30%
+          )
+          top left / 150% 150% no-repeat;
+        animation: progress-indeterminate 1s linear infinite;
+
+        &:--progress-bar {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+  /* PSEUDO ELEMENTS NOT COMPATIBLE WITH CUSTOM SELECTORS. */
+  :is(progress):--progress--value::-webkit-progress-value,
+  :is(progress):--progress--value::-moz-progress-bar,
+  :is(:--progress-aliases):--progress--value::before {
+    background-color: var(--v-progress-color);
+    transition: inline-size var(--v-transition);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    :is(progress):indeterminate::-webkit-progress-value,
+    :is(progress):indeterminate::-moz-progress-bar,
+    :is(:--progress-aliases):not(:--progress--value)::before {
+      background-color: transparent;
+    }
+  }
+
+  [dir="rtl"] {
+    @media (prefers-reduced-motion: no-preference) {
+      :--progress--indeterminate {
+        animation-direction: reverse;
+      }
+    }
+  }
+
+  @keyframes progress-indeterminate {
+    0% {
+      background-position: 200% 0;
+    }
+
+    100% {
+      background-position: -200% 0;
+    }
+  }
+}