@thinking.tools/teff 1.0.0 → 1.0.1

package/css/form.css

@@ -0,0 +1,371 @@
+@layer base {
+  label {
+    display: block;
+    font-size: var(--text-7);
+    font-weight: var(--font-medium);
+
+    &:has(input:where([type=checkbox], [type=radio])) {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-2);
+      row-gap: 0;
+      font-weight: var(--font-normal);
+    }
+  }
+
+  :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), textarea, select) {
+    width: 100%;
+    margin-block-start: var(--space-1);
+    padding-inline: var(--space-4);
+    /* Optical: lift the text 1px — lowercase x-height mass sits below the
+       pill's geometric center, otherwise reading 1–2px too low. */
+    padding-block: calc(var(--space-2) - 1px) calc(var(--space-2) + 1px);
+    font-size: var(--text-7);
+    line-height: var(--leading-normal);
+    background-color: var(--background);
+    color: var(--foreground);
+    border: 1px solid var(--input);
+    border-radius: var(--radius-field);
+    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+
+    &::placeholder {
+      color: var(--muted-foreground);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: var(--ring);
+      box-shadow: 0 0 0 3px rgb(from var(--ring) r g b / 0.35);
+      z-index: 1;
+    }
+
+    &:disabled {
+      background-color: var(--muted);
+    }
+
+    &:is([aria-invalid=true], :user-invalid) {
+      border-color: var(--danger);
+
+      &:focus {
+        box-shadow: 0 0 0 3px rgb(from var(--danger) r g b / 0.35);
+      }
+    }
+  }
+
+  textarea {
+    height: auto;
+    min-height: 5rem;
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius-large);
+    resize: vertical;
+  }
+
+  input[type=search] {
+    /* Strip UA search styling (Safari) so the pill renders consistently. */
+    appearance: none;
+  }
+
+  /* Non-standard, WebKit/Blink only — the unstylable cancel ×. */
+  input[type=search]::-webkit-search-cancel-button {
+    display: none;
+  }
+
+  input[type=file] {
+    width: 100%;
+    margin-block-start: var(--space-1);
+    font-size: var(--text-7);
+    color: var(--muted-foreground);
+  }
+
+  /* Styled as a button in button.css; just space it from the filename. */
+  input[type=file]::file-selector-button {
+    margin-inline-end: var(--space-3);
+  }
+
+  output {
+    font-weight: var(--font-medium);
+    font-variant-numeric: tabular-nums;
+  }
+
+  select {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right var(--space-3) center;
+    padding-inline-end: var(--space-8);
+  }
+
+  input:where([type=checkbox], [type=radio]) {
+    appearance: none;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin: 0;
+    position: relative;
+    background-color: var(--background);
+    border: 1px solid var(--input);
+    transition: background-color var(--transition-fast), border-color var(--transition-fast);
+
+    &:checked {
+      background-color: var(--primary);
+      border-color: var(--primary);
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background-color: var(--primary-foreground);
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: 100%;
+      }
+    }
+  }
+
+  input[type=checkbox] {
+    /* Scales with the radius presets but never turns circular. */
+    border-radius: calc(var(--radius-small) * 0.75);
+
+    &:checked::after {
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+    }
+
+    &[role=switch] {
+      --switch-height: calc(var(--bar-height) * 3);
+      --switch-inset: 2px;
+      --switch-thumb: calc(var(--switch-height) - var(--switch-inset) * 3);
+
+      width: calc(var(--switch-height) * 2);
+      height: var(--switch-height);
+      border-radius: var(--radius-full);
+      background-color: var(--input);
+      border-color: transparent;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: var(--switch-inset);
+        transform: translateY(-50%);
+        width: var(--switch-thumb);
+        height: var(--switch-thumb);
+        background-color: var(--background);
+        border-radius: var(--radius-full);
+        transition: transform var(--transition);
+        box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
+      }
+
+      &:checked {
+        background-color: var(--primary);
+
+        &::after {
+          content: none;
+        }
+
+        &::before {
+          transform: translateY(-50%) translateX(var(--switch-height));
+        }
+      }
+    }
+  }
+
+  input[type=radio] {
+    border-radius: var(--radius-full);
+
+    &:checked::after {
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E");
+    }
+  }
+
+  :where(input:where([type=checkbox], [type=radio], [type=range]), select):not(:disabled),
+  label:has(input:where([type=checkbox], [type=radio]):not(:disabled)) {
+    cursor: pointer;
+  }
+
+  input[type=range] {
+    width: 100%;
+    height: var(--bar-height);
+    appearance: none;
+    background: var(--muted);
+    border-radius: var(--radius-full);
+
+    &::-webkit-slider-thumb {
+      appearance: none;
+      width: 1.25rem;
+      height: 1.25rem;
+      background: var(--primary);
+      border-radius: var(--radius-full);
+      transition: transform var(--transition-fast);
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+
+    &::-moz-range-thumb {
+      width: 1.25rem;
+      height: 1.25rem;
+      background: var(--primary);
+      border: none;
+      border-radius: var(--radius-full);
+    }
+  }
+
+  fieldset {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-large);
+    padding: var(--space-4);
+    margin-block-end: var(--space-4);
+  }
+
+  legend {
+    font-size: var(--text-7);
+    font-weight: var(--font-medium);
+    padding: 0 var(--space-2);
+  }
+}
+
+@layer components {
+  /* Show/hide toggle for password inputs — the wrapper and button are
+     injected by password.js; this CSS is dormant without the script. */
+  [data-password] {
+    position: relative;
+    display: block;
+    margin-block-start: var(--space-1);
+
+    > input {
+      margin-block-start: 0;
+      padding-inline-end: var(--space-10);
+    }
+
+    > button {
+      position: absolute;
+      inset-inline-end: var(--space-1);
+      inset-block: 0;
+      margin-block: auto;
+      width: 2rem;
+      height: 2rem;
+      min-height: 0;
+      padding: 0;
+      display: grid;
+      place-items: center;
+      background: none;
+      border: none;
+      box-shadow: none;
+      border-radius: var(--radius-full);
+      color: var(--muted-foreground);
+
+      &:hover:not(:disabled) {
+        background-color: var(--accent);
+        color: var(--foreground);
+      }
+
+      /* 40px hit area on a 32px control. */
+      &::before {
+        content: "";
+        position: absolute;
+        inset: -4px;
+        border-radius: inherit;
+      }
+
+      /* Eye / eye-off cross-fade. */
+      & svg {
+        grid-area: 1 / 1;
+        width: 1.15rem;
+        height: 1.15rem;
+        transition:
+          opacity 200ms cubic-bezier(0.2, 0, 0, 1),
+          scale 200ms cubic-bezier(0.2, 0, 0, 1),
+          filter 200ms cubic-bezier(0.2, 0, 0, 1);
+      }
+
+      & svg.off {
+        opacity: 0;
+        scale: 0.25;
+        filter: blur(4px);
+      }
+
+      &[aria-pressed="true"] {
+        & svg.off {
+          opacity: 1;
+          scale: 1;
+          filter: blur(0);
+        }
+
+        & svg:not(.off) {
+          opacity: 0;
+          scale: 0.25;
+          filter: blur(4px);
+        }
+      }
+    }
+  }
+
+  fieldset.group {
+    display: flex;
+    align-items: stretch;
+    border: none;
+    padding: 0;
+    margin: 0;
+
+    & > :is(input, textarea, select) {
+      flex: 1;
+      margin-block-start: 0;
+
+      &:not(:focus):not(:last-child) {
+        border-inline-end-color: transparent;
+      }
+    }
+
+    & > :is(input, textarea, select, button) {
+      border-radius: 0;
+      &:first-child {
+        border-radius: var(--radius-field) 0 0 var(--radius-field);
+      }
+
+      &:last-child {
+        border-radius: 0 var(--radius-field) var(--radius-field) 0;
+      }
+    }
+
+    & > legend {
+      float: inline-start;
+      display: inline-flex;
+      align-items: center;
+      padding: 0 var(--space-4);
+      line-height: var(--leading-normal);
+      font-weight: var(--font-normal);
+      color: var(--muted-foreground);
+      background-color: var(--muted);
+      border: 1px solid var(--input);
+      border-inline-end: none;
+      border-radius: var(--radius-field) 0 0 var(--radius-field);
+    }
+  }
+
+  [data-field] {
+    margin-block-end: var(--space-4);
+    flex-wrap: wrap;
+
+    /* Hint text that succeeds an input with aria-describedby */
+    [data-hint], .error {
+      font-size: var(--text-8);
+      font-weight: var(--font-normal);
+      color: var(--muted-foreground);
+      margin-block-start: var(--space-1);
+      margin-inline-start: var(--space-4);
+      display: block;
+      flex-basis: 100%;
+      min-inline-size: 100%;
+    }
+
+    .error {
+      display: none;
+    }
+
+    /* Reveal error on data-field="error" */
+    &[data-field="error"] .error {
+      display: block;
+      color: var(--danger);
+    }
+  }
+}

package/css/grid.css

@@ -0,0 +1,78 @@
+@layer components {
+  :root {
+    --grid-cols: 12;
+    --grid-gap: var(--space-6);
+    --container-max: 1280px;
+    --container-pad: var(--space-4);
+  }
+
+  /* Auto-fit grid: as many columns as fit, each at least --autogrid-min wide. */
+  .autogrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(var(--autogrid-min, 14rem), 100%), 1fr));
+    gap: var(--grid-gap);
+  }
+
+  .container {
+    width: 100%;
+    max-width: var(--container-max);
+    margin-inline: auto;
+    padding-inline: var(--container-pad);
+  }
+
+  .row {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-cols), 1fr);
+    gap: var(--grid-gap);
+    width: 100%;
+  }
+
+  /* Column spans — only meaningful as direct children of .row. Scoped so the
+     generic names (.col, …) can't hijack placement in unrelated grids. */
+  .row > :is(.col, [class*="col-"]) { grid-column-end: span calc(var(--span, var(--grid-cols)) + var(--offset, 0)); }
+
+  .col-1  { --span: 1; }
+  .col-2  { --span: 2; }
+  .col-3  { --span: 3; }
+  .col-4  { --span: 4; }
+  .col-5  { --span: 5; }
+  .col-6  { --span: 6; }
+  .col-7  { --span: 7; }
+  .col-8  { --span: 8; }
+  .col-9  { --span: 9; }
+  .col-10 { --span: 10; }
+  .col-11 { --span: 11; }
+  .col-12 { --span: 12; }
+
+  /* Offsets */
+  .offset-1  { --offset: 1; }
+  .offset-2  { --offset: 2; }
+  .offset-3  { --offset: 3; }
+  .offset-4  { --offset: 4; }
+  .offset-5  { --offset: 5; }
+  .offset-6  { --offset: 6; }
+
+  .row > [class*="offset-"] {
+    margin-inline-start: calc(var(--offset) * (100% + var(--grid-gap)) / (var(--span) + var(--offset)));
+  }
+
+  .row > .col-end {
+    grid-column-start: span var(--span, 1);
+    grid-column-end: -1;
+  }
+
+  /* Responsive: stack on mobile */
+  @media (max-width: 768px) {
+    .row {
+      --grid-cols: 4;
+      --grid-gap: var(--space-4);
+    }
+    .row > :is(.col, [class*="col-"]) {
+      --span: 4;
+    }
+    .row > [class*="offset-"] {
+      --offset: 0;
+      margin-inline-start: 0;
+    }
+  }
+}

package/css/nav.css

@@ -0,0 +1,118 @@
+/**
+ * Navigation primitives.
+ *
+ * Breadcrumbs:
+ *   <nav data-breadcrumbs aria-label="Breadcrumb">
+ *     <ol>
+ *       <li><a href="/">Home</a></li>
+ *       <li><a href="/docs">Docs</a></li>
+ *       <li aria-current="page">Buttons</li>
+ *     </ol>
+ *   </nav>
+ *
+ * Inline nav menu (horizontal links):
+ *   <nav data-menu>
+ *     <ul>
+ *       <li><a href="#" aria-current="page">Overview</a></li>
+ *       <li><a href="#">Reports</a></li>
+ *     </ul>
+ *   </nav>
+ */
+@layer components {
+  nav[data-breadcrumbs] {
+    font-size: var(--text-7);
+
+    ol, ul {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--space-1);
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    li {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-1);
+      margin: 0;
+      color: var(--muted-foreground);
+
+      /* Chevron separator before every crumb but the first. */
+      & + li::before {
+        content: "";
+        width: 0.9em;
+        height: 0.9em;
+        flex-shrink: 0;
+        background-color: var(--faint-foreground);
+        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
+        mask-size: contain;
+        mask-repeat: no-repeat;
+      }
+
+      &[aria-current] {
+        color: var(--foreground);
+        font-weight: var(--font-medium);
+      }
+    }
+
+    a {
+      color: var(--muted-foreground);
+      text-decoration: none;
+      border-radius: var(--radius-small);
+      transition: color var(--transition-fast);
+
+      &:hover {
+        color: var(--foreground);
+      }
+    }
+  }
+
+  nav[data-menu] {
+    ul, menu {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--space-1);
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    li {
+      margin: 0;
+    }
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-2);
+      min-height: 2.25rem;
+      padding: var(--space-1) var(--space-4);
+      font-size: var(--text-7);
+      color: var(--muted-foreground);
+      text-decoration: none;
+      border-radius: var(--radius-button);
+      transition: background-color var(--transition-fast), color var(--transition-fast);
+
+      &:hover {
+        background-color: var(--accent);
+        color: var(--foreground);
+      }
+
+      &[aria-current] {
+        background-color: var(--accent);
+        color: var(--foreground);
+        font-weight: var(--font-medium);
+      }
+
+      & svg {
+        display: block;
+        width: 1.15em;
+        height: 1.15em;
+        flex-shrink: 0;
+      }
+    }
+  }
+}

package/css/progress.css

@@ -0,0 +1,75 @@
+@layer base {
+  progress {
+    appearance: none;
+    width: 100%;
+    height: var(--bar-height);
+    border: none;
+    border-radius: var(--radius-full);
+    overflow: hidden;
+    background-color: var(--muted);
+
+    &::-webkit-progress-bar {
+      background-color: var(--muted);
+      border-radius: var(--radius-full);
+    }
+
+    &::-webkit-progress-value {
+      background-color: var(--primary);
+      border-radius: var(--radius-full);
+      transition: width var(--transition);
+    }
+
+    &::-moz-progress-bar {
+      background-color: var(--primary);
+      border-radius: var(--radius-full);
+    }
+  }
+
+  meter {
+    appearance: none;
+    width: 100%;
+    height: var(--bar-height);
+    border: none;
+    border-radius: var(--radius-full);
+    overflow: hidden;
+    background: var(--muted);
+
+    &::-webkit-meter-bar {
+      background: var(--muted);
+      border: none;
+      border-radius: var(--radius-full);
+      height: var(--bar-height);
+    }
+
+    &::-webkit-meter-optimum-value,
+    &::-webkit-meter-suboptimum-value,
+    &::-webkit-meter-even-less-good-value {
+      border-radius: var(--radius-full);
+    }
+
+    &::-webkit-meter-optimum-value {
+      background: var(--success);
+    }
+
+    &::-webkit-meter-suboptimum-value {
+      background: var(--warning);
+    }
+
+    &::-webkit-meter-even-less-good-value {
+      background: var(--danger);
+    }
+
+    &::-moz-meter-bar {
+      background: var(--success);
+      border-radius: var(--radius-full);
+    }
+
+    &:-moz-meter-sub-optimum::-moz-meter-bar {
+      background: var(--warning);
+    }
+
+    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+      background: var(--danger);
+    }
+  }
+}