@excom/valence 0.1.0

package/src/forms/input-range.css

@@ -0,0 +1,109 @@
+/**
+ * `input[type="range"]`
+ * Track: 0.375rem. Thumb: 1.25rem (2px border).
+ */
+
+@define-mixin module-input-range {
+  [type="range"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 1.25rem;
+    background: none;
+
+    /* Slider Track */
+    &::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 0.375rem;
+      border-radius: var(--v-border-radius);
+      background-color: var(--v-range-border-color);
+      transition:
+        background-color var(--v-transition),
+        box-shadow var(--v-transition);
+    }
+
+    &::-moz-range-track {
+      width: 100%;
+      height: 0.375rem;
+      border-radius: var(--v-border-radius);
+      background-color: var(--v-range-border-color);
+      transition:
+        background-color var(--v-transition),
+        box-shadow var(--v-transition);
+    }
+
+    &::-ms-track {
+      width: 100%;
+      height: 0.375rem;
+      border-radius: var(--v-border-radius);
+      background-color: var(--v-range-border-color);
+      transition:
+        background-color var(--v-transition),
+        box-shadow var(--v-transition);
+    }
+
+    /* Slider Thumb */
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 1.25rem;
+      height: 1.25rem;
+      margin-top: -0.4375rem;
+      border: 2px solid var(--v-range-thumb-border-color);
+      border-radius: 50%;
+      background-color: var(--v-range-thumb-color);
+      cursor: pointer;
+      transition:
+        background-color var(--v-transition),
+        transform var(--v-transition);
+    }
+
+    &::-moz-range-thumb {
+      -webkit-appearance: none;
+      width: 1.25rem;
+      height: 1.25rem;
+      margin-top: -0.4375rem;
+      border: 2px solid var(--v-range-thumb-border-color);
+      border-radius: 50%;
+      background-color: var(--v-range-thumb-color);
+      cursor: pointer;
+      transition:
+        background-color var(--v-transition),
+        transform var(--v-transition);
+    }
+
+    &::-ms-thumb {
+      -webkit-appearance: none;
+      width: 1.25rem;
+      height: 1.25rem;
+      margin-top: -0.4375rem;
+      border: 2px solid var(--v-range-thumb-border-color);
+      border-radius: 50%;
+      background-color: var(--v-range-thumb-color);
+      cursor: pointer;
+      transition:
+        background-color var(--v-transition),
+        transform var(--v-transition);
+    }
+
+    &:active,
+    &:focus-within {
+      --v-range-border-color: var(--v-range-active-border-color);
+      --v-range-thumb-color: var(--v-range-thumb-active-color);
+    }
+
+    &:active {
+      &::-webkit-slider-thumb {
+        transform: scale(1.25);
+      }
+
+      &::-moz-range-thumb {
+        transform: scale(1.25);
+      }
+
+      &::-ms-thumb {
+        transform: scale(1.25);
+      }
+    }
+  }
+}

package/src/forms/input-search.css

@@ -0,0 +1,52 @@
+/**
+ * `input[type="search"]`
+ */
+
+@define-mixin module-input-search {
+  /* `:not()` for specificity, so padding needs no `!important` */
+  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+    &[type="search"] {
+      padding-inline-start: calc(
+        var(--v-form-element-spacing-horizontal) + 1.75rem
+      );
+      background-image: var(--v-icon-search);
+      background-position: center left
+        calc(var(--v-form-element-spacing-horizontal) + 0.125rem);
+      background-size: 1rem auto;
+      background-repeat: no-repeat;
+
+      &[aria-invalid] {
+        padding-inline-start: calc(
+          var(--v-form-element-spacing-horizontal) + 1.75rem
+        ) !important;
+        background-position:
+          center left 1.125rem,
+          center right 0.75rem;
+      }
+
+      &[aria-invalid="false"] {
+        background-image: var(--v-icon-search), var(--v-icon-valid);
+      }
+
+      &[aria-invalid="true"] {
+        background-image: var(--v-icon-search), var(--v-icon-invalid);
+      }
+    }
+  }
+
+  [dir="rtl"] {
+    :where(input) {
+      &:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
+        &[type="search"] {
+          background-position: center right 1.125rem;
+
+          &[aria-invalid] {
+            background-position:
+              center right 1.125rem,
+              center left 0.75rem;
+          }
+        }
+      }
+    }
+  }
+}

package/src/layout/abstract.css

@@ -0,0 +1,9 @@
+/**
+ * abstract
+ */
+
+@define-mixin module-abstract {
+  .abstract {
+    display: contents;
+  }
+}

package/src/layout/container.css

@@ -0,0 +1,43 @@
+/**
+ * Container
+ */
+
+@define-mixin module-container {
+  /**
+   * Centered page column with responsive max-width.
+   * @cssclass container
+   */
+  .container,
+  /**
+   * Full-width fluid column (padding only, no max-width).
+   * @cssclass container-fluid
+   */
+  .container-fluid {
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: var(--v-spacing);
+    padding-left: var(--v-spacing);
+  }
+
+  .container {
+    /* sm: also drop horizontal padding (first breakpoint) */
+    @media (min-width: 576px) {
+      max-width: 510px;
+      padding-right: 0;
+      padding-left: 0;
+    }
+    @media (min-width: 768px) {
+      max-width: 700px;
+    }
+    @media (min-width: 1024px) {
+      max-width: 950px;
+    }
+    @media (min-width: 1280px) {
+      max-width: 1200px;
+    }
+    @media (min-width: 1536px) {
+      max-width: 1450px;
+    }
+  }
+}

package/src/layout/document.css

@@ -0,0 +1,45 @@
+/**
+ * Document: border-box and responsive typography.
+ * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
+ */
+
+@define-mixin module-document {
+  /* 1. Border-box (opinionated)
+     2. No background-repeat (opinionated) */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    background-repeat: no-repeat;
+  }
+
+  /* 1. Inherit text-decoration (opinionated)
+     2. Inherit vertical-align (opinionated) */
+  ::before,
+  ::after {
+    text-decoration: inherit;
+    vertical-align: inherit;
+  }
+
+  /* 1. Line-height (opinionated)
+     2. Break words to avoid overflow (opinionated)
+     3. 4-space tabs (opinionated)
+     4. No iOS tap highlight (opinionated)
+     5. Don't resize text after iOS orientation change */
+  :where(:root),
+  :where(:host) {
+    -webkit-tap-highlight-color: transparent;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    background-color: var(--v-background-color);
+    color: var(--v-color);
+    font-weight: var(--v-font-weight);
+    font-size: var(--v-font-size);
+    line-height: var(--v-line-height);
+    font-family: var(--v-font-family);
+    text-underline-offset: var(--v-text-underline-offset);
+    text-rendering: optimizeLegibility;
+    overflow-wrap: break-word;
+    tab-size: 4;
+  }
+}

package/src/layout/grid.css

@@ -0,0 +1,24 @@
+/**
+ * Minimal auto-layout grid
+ */
+
+@define-mixin module-grid {
+  /**
+   * Auto-fit responsive columns.
+   * @cssclass grid
+   */
+  .grid {
+    grid-column-gap: var(--v-grid-column-gap);
+    grid-row-gap: var(--v-grid-row-gap);
+    display: grid;
+    grid-template-columns: 1fr;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+    }
+
+    & > * {
+      min-width: 0; /* HACK for children in overflow */
+    }
+  }
+}

package/src/layout/landmarks.css

@@ -0,0 +1,54 @@
+/**
+ * Landmarks
+ *
+ * Reboot from normalize.css v8.0.1 (MIT) and sanitize.css v13.0.0 (CC0).
+ */
+
+@define-mixin module-landmarks {
+  /* 1. Drop body margin (opinionated) */
+  body {
+    width: 100%;
+    margin: 0;
+  }
+
+  /* Landmark aliases: match native HTML display (custom elements / role) */
+  :--header,
+  :--main,
+  :--footer {
+    display: block;
+  }
+
+  /* `<header>`, `<main>`, `<footer>` as semantic containers */
+  body {
+    @mixin abstract-wrapper {
+      > :--header,
+      > :--main,
+      > :--footer {
+        width: 100%;
+        margin-right: auto;
+        margin-left: auto;
+        padding: var(--v-block-spacing-vertical)
+          var(--v-block-spacing-horizontal);
+
+        /* sm: also drop horizontal padding (first breakpoint) */
+        @media (min-width: 576px) {
+          max-width: 510px;
+          padding-right: 0;
+          padding-left: 0;
+        }
+        @media (min-width: 768px) {
+          max-width: 700px;
+        }
+        @media (min-width: 1024px) {
+          max-width: 950px;
+        }
+        @media (min-width: 1280px) {
+          max-width: 1200px;
+        }
+        @media (min-width: 1536px) {
+          max-width: 1450px;
+        }
+      }
+    }
+  }
+}

package/src/layout/overflow-auto.css

@@ -0,0 +1,33 @@
+/**
+ * Overflow utilities
+ */
+
+@define-mixin module-overflow-auto {
+  /**
+   * Scrollable overflow container.
+   * @cssclass overflow-auto
+   */
+  .overflow-auto {
+    overflow: auto;
+  }
+
+  /**
+   * Always show a styled vertical scrollbar.
+   * @cssclass show-scrollbar
+   */
+  .show-scrollbar {
+    overflow-y: scroll;
+    &::-webkit-scrollbar {
+      -webkit-appearance: none;
+      width: 8px;
+      height: 8px;
+    }
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: var(--v-muted-color);
+      border-radius: 4px;
+    }
+  }
+}

package/src/layout/section.css

@@ -0,0 +1,10 @@
+/**
+ * Section
+ */
+
+@define-mixin module-section {
+  :--section {
+    display: block;
+    margin-bottom: var(--v-block-spacing-vertical);
+  }
+}