@excom/valence 0.1.0

package/src/components/accordion.css

@@ -0,0 +1,134 @@
+/**
+ * Accordion (<details>)
+ */
+
+@define-mixin module-accordion {
+  :--details {
+    display: block;
+    margin-bottom: var(--v-spacing);
+    overflow: clip;
+    @mixin abstract-wrapper {
+      > :--summary {
+        display: list-item;
+        user-select: none;
+        line-height: 1rem;
+        list-style-type: none;
+        cursor: pointer;
+        position: relative;
+        padding: calc(var(--v-nav-element-spacing-vertical) * 0.25) 0;
+
+        transition: color var(--v-transition);
+
+        &:not(:--button) {
+          color: var(--v-accordion-close-summary-color);
+        }
+
+        /* Reset marker */
+        &::-webkit-details-marker {
+          display: none;
+        }
+
+        &::marker {
+          display: none;
+        }
+
+        &::-moz-list-bullet {
+          list-style-type: none;
+        }
+
+        /* Marker */
+        &::after {
+          display: block;
+          width: 1rem;
+          height: 1rem;
+          position: absolute;
+          right: 0;
+          top: 50%;
+          transform: translateY(-50%) rotate(-90deg);
+          background-image: var(--v-icon-chevron);
+          background-position: right center;
+          background-size: 1rem auto;
+          background-repeat: no-repeat;
+          content: "";
+
+          transition: transform var(--v-transition);
+        }
+
+        &:focus {
+          outline: none;
+
+          &:not(:--button) {
+            color: var(--v-accordion-active-summary-color);
+          }
+        }
+
+        &:focus-visible {
+          &:not(:--button) {
+            outline: var(--v-outline-width) solid var(--v-primary-focus);
+            outline-offset: calc(var(--v-spacing, 1rem) * 0.5);
+            color: var(--v-primary);
+          }
+        }
+
+        /* Type button */
+        &:--button {
+          width: 100%;
+          text-align: left;
+
+          /* Marker */
+          &::after {
+            height: calc(1rem * var(--v-line-height, 1.5));
+          }
+        }
+      }
+    }
+    /* Open */
+    &::details-content {
+      @mixin details-animated-content;
+    }
+    &:--details--open {
+      @mixin abstract-wrapper {
+        > :--summary {
+          &:not(:--button):not(:focus) {
+            color: var(--v-accordion-open-summary-color);
+          }
+
+          &::after {
+            transform: translateY(-50%) rotate(0);
+          }
+        }
+      }
+
+      &::details-content {
+        height: auto;
+        opacity: 1;
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    :--details {
+      @mixin abstract-wrapper {
+        > :--summary {
+          text-align: right;
+
+          &::after {
+            float: left;
+            background-position: left center;
+          }
+        }
+      }
+    }
+  }
+}
+
+@define-mixin details-animated-content {
+  interpolate-size: allow-keywords;
+  height: 0;
+  opacity: 0;
+  display: flow-root;
+  transition-property: height, opacity, content-visibility;
+  transition-duration: var(--v-transition-duration-standard);
+  transition-timing-function: var(--v-transition-ease-out);
+  transition-behavior: allow-discrete;
+}

package/src/components/card.css

@@ -0,0 +1,54 @@
+/**
+ * Card (<article>)
+ */
+
+@define-mixin module-card {
+  :--article {
+    display: block;
+    margin-bottom: var(--v-block-spacing-vertical);
+    padding: var(--v-block-spacing-vertical) var(--v-block-spacing-horizontal);
+    border-radius: var(--v-border-radius);
+    background: var(--v-card-background-color);
+    box-shadow: var(--v-card-box-shadow);
+    /**
+     * Nested card — quieter border / shadow inside another card.
+     * @cssclass nested
+     */
+    &.nested {
+      @mixin abstract-wrapper {
+        &,
+        > :--header,
+        > :--footer {
+          @mixin util-nested-card;
+        }
+      }
+    }
+
+    @mixin abstract-wrapper {
+      > :--header,
+      > :--footer {
+        margin-right: calc(var(--v-block-spacing-horizontal) * -1);
+        margin-left: calc(var(--v-block-spacing-horizontal) * -1);
+        padding: calc(var(--v-block-spacing-vertical) * 0.66)
+          var(--v-block-spacing-horizontal);
+        background-color: var(--v-card-sectioning-background-color);
+      }
+
+      > :--header {
+        margin-top: calc(var(--v-block-spacing-vertical) * -1);
+        margin-bottom: var(--v-block-spacing-vertical);
+        border-bottom: var(--v-border-width) solid var(--v-card-border-color);
+        border-top-right-radius: var(--v-border-radius);
+        border-top-left-radius: var(--v-border-radius);
+      }
+
+      > :--footer {
+        margin-top: var(--v-block-spacing-vertical);
+        margin-bottom: calc(var(--v-block-spacing-vertical) * -1);
+        border-top: var(--v-border-width) solid var(--v-card-border-color);
+        border-bottom-right-radius: var(--v-border-radius);
+        border-bottom-left-radius: var(--v-border-radius);
+      }
+    }
+  }
+}

package/src/components/dropdown.css

@@ -0,0 +1,235 @@
+/**
+ * Dropdown (details.dropdown)
+ */
+
+/**
+ * Dropdown menu — apply to `<details>` / `:--details`.
+ * @cssclass dropdown
+ */
+@define-mixin module-dropdown {
+  /* Container */
+  :--details.dropdown {
+    position: relative;
+    border-bottom: none;
+
+    /* Marker */
+    > :--summary,
+    > :--button,
+    > :--link {
+      &::after {
+        display: block;
+        width: 1rem;
+        height: calc(1rem * var(--v-line-height, 1.5));
+        margin-inline-start: 0.25rem;
+        float: right;
+        /* TODO: why 0.2rem? Needed to align the marker with a regular select */
+        transform: rotate(0deg) translateX(0.2rem);
+        background-image: var(--v-icon-chevron);
+        background-position: right center;
+        background-size: 1rem auto;
+        background-repeat: no-repeat;
+        content: "";
+      }
+    }
+  }
+
+  /* Accordion-style dropdown inside a nav */
+  :--nav :--details.dropdown {
+    margin-bottom: 0;
+  }
+
+  /* Select-style summary inside an accordion dropdown */
+  :--details.dropdown > :--summary:not(:--button) {
+    height: calc(
+      1rem * var(--v-line-height) + var(--v-form-element-spacing-vertical) * 2 +
+        var(--v-border-width) * 2
+    );
+    padding: var(--v-form-element-spacing-vertical)
+      var(--v-form-element-spacing-horizontal);
+    border: var(--v-border-width) solid var(--v-form-element-border-color);
+    border-radius: var(--v-border-radius);
+    background-color: var(--v-form-element-background-color);
+    color: var(--v-form-element-placeholder-color);
+    line-height: inherit;
+    cursor: pointer;
+    user-select: none;
+
+    transition:
+      background-color var(--v-transition),
+      border-color var(--v-transition),
+      color var(--v-transition),
+      box-shadow var(--v-transition);
+
+    &:active,
+    &:focus {
+      border-color: var(--v-form-element-active-border-color);
+      background-color: var(--v-form-element-active-background-color);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 var(--v-outline-width) var(--v-form-element-focus-color);
+    }
+
+    /* Undo accordion's `:focus-visible` */
+    &:focus-visible {
+      outline: none;
+    }
+
+    /* Aria-invalid */
+    &[aria-invalid="false"] {
+      --v-form-element-border-color: var(--v-form-element-valid-border-color);
+      --v-form-element-active-border-color: var(
+        --v-form-element-valid-focus-color
+      );
+      --v-form-element-focus-color: var(--v-form-element-valid-focus-color);
+    }
+
+    &[aria-invalid="true"] {
+      --v-form-element-border-color: var(--v-form-element-invalid-border-color);
+      --v-form-element-active-border-color: var(
+        --v-form-element-invalid-focus-color
+      );
+      --v-form-element-focus-color: var(--v-form-element-invalid-focus-color);
+    }
+  }
+
+  /* Dropdown inside a nav */
+  :--nav :--details.dropdown {
+    display: inline;
+    margin: calc(var(--v-nav-element-spacing-vertical) * -1) 0;
+
+    > :--summary {
+      &::after {
+        transform: rotate(0deg) translateX(0rem);
+      }
+
+      &:not(:--button) {
+        height: calc(
+          (1rem * var(--v-line-height)) +
+            (var(--v-nav-link-spacing-vertical) * 2)
+        );
+        padding: calc(
+            var(--v-nav-link-spacing-vertical) - (var(--v-border-width) * 2)
+          )
+          var(--v-nav-link-spacing-horizontal);
+
+        &:focus-visible {
+          box-shadow: 0 0 0 var(--v-outline-width) var(--v-primary-focus);
+        }
+      }
+    }
+  }
+
+  /* Submenu */
+  :--details.dropdown > :--summary + :--list {
+    display: flex;
+    z-index: 99;
+    position: absolute;
+    left: 0;
+    flex-direction: column;
+    width: 100%;
+    min-width: fit-content;
+    margin: 0;
+    margin-top: var(--v-outline-width);
+    padding: 0;
+    border: var(--v-border-width) solid var(--v-dropdown-border-color);
+    border-radius: var(--v-border-radius);
+    background-color: var(--v-dropdown-background-color);
+    box-shadow: var(--v-dropdown-box-shadow);
+    color: var(--v-dropdown-color);
+    white-space: nowrap;
+    opacity: 0;
+
+    transition:
+      opacity var(--v-transition),
+      transform 0s ease-in-out 1s;
+
+    &[dir="rtl"] {
+      right: 0;
+      left: auto;
+    }
+
+    :--li {
+      width: 100%;
+      margin-bottom: 0;
+      padding: calc(var(--v-form-element-spacing-vertical) * 0.5)
+        var(--v-form-element-spacing-horizontal);
+      list-style: none;
+
+      &:first-of-type {
+        margin-top: calc(var(--v-form-element-spacing-vertical) * 0.5);
+      }
+
+      &:last-of-type {
+        margin-bottom: calc(var(--v-form-element-spacing-vertical) * 0.5);
+      }
+
+      :--link {
+        display: block;
+        margin: calc(var(--v-form-element-spacing-vertical) * -0.5)
+          calc(var(--v-form-element-spacing-horizontal) * -1);
+        padding: calc(var(--v-form-element-spacing-vertical) * 0.5)
+          var(--v-form-element-spacing-horizontal);
+        overflow: hidden;
+        border-radius: 0;
+        color: var(--v-dropdown-color);
+        text-decoration: none;
+        text-overflow: ellipsis;
+
+        &:hover,
+        &:focus,
+        &:active,
+        &:focus-visible,
+        &[aria-current]:not([aria-current="false"]) {
+          background-color: var(--v-dropdown-hover-background-color);
+        }
+      }
+
+      :--label {
+        width: 100%;
+      }
+
+      /* Firefox lacks `:has()`, so this misses there */
+      &:has(:--label):hover {
+        background-color: var(--v-dropdown-hover-background-color);
+      }
+    }
+  }
+
+  /* Open summary inside an accordion dropdown */
+  :--details.dropdown:--details--open > :--summary {
+    margin-bottom: 0;
+  }
+
+  /* Open menu inside an accordion dropdown */
+  :--details.dropdown:--details--open > :--summary {
+    + :--list {
+      transform: scaleY(1);
+      opacity: 1;
+
+      transition:
+        opacity var(--v-transition),
+        transform 0s ease-in-out 0s;
+    }
+  }
+
+  /* Close control inside an accordion dropdown */
+  :--details.dropdown:--details--open > :--summary {
+    &::before {
+      display: block;
+      z-index: 1;
+      position: fixed;
+      width: 100vw;
+      height: 100vh;
+      inset: 0;
+      background: none;
+      content: "";
+      cursor: default;
+    }
+  }
+
+  /* Label */
+  :--label > :--details.dropdown {
+    margin-top: calc(var(--v-spacing) * 0.25);
+  }
+}

package/src/components/group.css

@@ -0,0 +1,119 @@
+/**
+ * Group ([role="group"], [role="search"])
+ */
+
+@define-mixin module-group {
+  :--group,
+  :--search {
+    display: inline-flex;
+    position: relative;
+    width: 100%;
+    margin-bottom: var(--v-spacing);
+    border-radius: var(--v-border-radius);
+    box-shadow: var(--v-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+    vertical-align: middle;
+    transition: box-shadow var(--v-transition);
+
+    > *,
+    input:not([type="checkbox"], [type="radio"]),
+    select,
+    textarea {
+      position: relative;
+      flex: 1 1 auto;
+      margin-bottom: 0;
+
+      &:not(:first-child) {
+        margin-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:focus {
+        z-index: 2;
+      }
+    }
+
+    :--label:has(input[role="switch"]) {
+      background-color: var(--v-form-element-background-color);
+      border: var(--v-border-width) solid var(--v-form-element-border-color);
+      border-left: none;
+      border-top-right-radius: var(--v-border-radius);
+      border-bottom-right-radius: var(--v-border-radius);
+      padding: var(--v-form-element-spacing-vertical)
+        var(--v-form-element-spacing-horizontal);
+      white-space: nowrap;
+      input {
+        margin-left: calc(var(--v-spacing) * 0.5);
+        margin-right: calc(var(--v-spacing) * 0.5);
+      }
+    }
+
+    :--button,
+    [type="submit"],
+    [type="reset"],
+    input:not([type="checkbox"], [type="radio"]),
+    select {
+      &:not(:first-child) {
+        margin-left: calc(var(--v-border-width) * -1);
+      }
+    }
+
+    :--button,
+    [type="submit"],
+    [type="reset"] {
+      width: auto;
+    }
+
+    /* Group box shadow when a button is focused */
+    &:has(:--button, [type="submit"]:focus) {
+      --v-group-box-shadow: var(--v-group-box-shadow-focus-with-button);
+
+      input:not([type="checkbox"], [type="radio"]),
+      select {
+        border-color: transparent;
+      }
+    }
+
+    /* Group box shadow when an input is focused */
+    &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
+      --v-group-box-shadow: var(--v-group-box-shadow-focus-with-input);
+
+      /* Adapt box shadow for buttons */
+      :--button,
+      [type="submit"] {
+        --v-button-box-shadow: 0 0 0 var(--v-border-width)
+          var(--v-primary-border);
+        --v-button-hover-box-shadow: 0 0 0 var(--v-border-width)
+          var(--v-primary-hover-border);
+      }
+    }
+
+    /* Remove button box shadow if we have a group box shadow */
+    :--button,
+    [type="submit"],
+    [type="reset"] {
+      &:focus {
+        box-shadow: none;
+      }
+    }
+  }
+
+  :--search {
+    > * {
+      &:first-child {
+        border-top-left-radius: 5rem;
+        border-bottom-left-radius: 5rem;
+      }
+
+      &:last-child {
+        border-top-right-radius: 5rem;
+        border-bottom-right-radius: 5rem;
+      }
+    }
+  }
+}

package/src/components/loading.css

@@ -0,0 +1,41 @@
+/**
+ * Loading ([aria-busy=true])
+ */
+
+@define-mixin module-loading {
+  /* Everything except form elements */
+  [aria-busy="true"]:not(input, select, textarea, html, form) {
+    white-space: nowrap;
+
+    &::before {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      background-image: var(--v-icon-loading);
+      background-size: 1em auto;
+      background-repeat: no-repeat;
+      content: "";
+      vertical-align: -0.125em; /* Visual alignment */
+    }
+
+    &:not(:empty) {
+      &::before {
+        margin-inline-end: calc(var(--v-spacing) * 0.5);
+      }
+    }
+
+    &:empty {
+      text-align: center;
+    }
+  }
+
+  /* Buttons and links */
+  :--button,
+  [type="submit"],
+  [type="reset"],
+  :--link {
+    &[aria-busy="true"] {
+      pointer-events: none;
+    }
+  }
+}