@thinking.tools/teff 1.0.0 → 1.0.2

package/css/sidebar.css

@@ -0,0 +1,227 @@
+@layer components {
+  [data-sidebar-layout] {
+    display: grid;
+    grid-template-columns: 14rem 1fr;
+    grid-template-rows: auto 1fr;
+    height: 100dvh;
+
+    > main {
+      grid-row: 2;
+      min-width: 0;
+      overflow-y: auto;
+    }
+
+    > aside[data-sidebar] {
+      grid-row: 2;
+      min-height: 0;
+      z-index: 1;
+      background-color: var(--background);
+      border-inline-end: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+
+      > :is(header, footer) {
+        flex-shrink: 0;
+        padding: var(--space-3);
+      }
+
+      > footer {
+        margin-block-start: auto;
+      }
+
+      > nav {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+        padding: var(--space-3) var(--space-2);
+        font-size: var(--text-7);
+
+        /* Headings or [data-nav-label] act as section labels between link
+           groups. Prefer [data-nav-label] on a <p> when the labels shouldn't
+           join the page's heading outline. */
+        :is(h2, h3, h4, h5, h6, [data-nav-label]) {
+          font-size: var(--text-8);
+          font-weight: var(--font-semibold);
+          letter-spacing: 0.05em;
+          text-transform: uppercase;
+          color: var(--faint-foreground);
+          margin: var(--space-4) var(--space-4) var(--space-1);
+        }
+
+        ul {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+          display: flex;
+          flex-direction: column;
+          gap: var(--space-1);
+
+          li {
+            margin: 0;
+          }
+        }
+
+        a {
+          display: flex;
+          align-items: center;
+          gap: var(--space-2);
+          min-height: 2.25rem;
+          padding: var(--space-1) var(--space-4);
+          color: var(--muted-foreground);
+          text-decoration: none;
+          border-radius: var(--radius-button);
+          transition: background-color var(--transition-fast), color var(--transition-fast);
+
+          &:is(:hover, [aria-current]) {
+            background-color: var(--accent);
+            color: var(--foreground);
+          }
+
+          &[aria-current] {
+            font-weight: var(--font-medium);
+          }
+
+          & svg {
+            display: block;
+            width: 1.15em;
+            height: 1.15em;
+            flex-shrink: 0;
+          }
+        }
+
+        details {
+          border: none;
+          overflow: visible;
+
+          & + details { margin-top: 0; }
+          &[open] summary { border-bottom: none; }
+          > ul { margin-inline-start: var(--space-4); padding: var(--space-1) 0; }
+        }
+
+        summary {
+          justify-content: flex-start;
+          padding: var(--space-2) var(--space-4);
+          border-radius: var(--radius-button);
+
+          &::after {
+            width: 0.75rem;
+            height: 0.75rem;
+            margin-inline-start: auto;
+          }
+        }
+      }
+    }
+
+    > nav[data-topnav] {
+      grid-column: 1 / -1;
+    }
+  }
+
+  nav[data-topnav] {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2) var(--space-3);
+    padding: var(--space-2) var(--space-4);
+    background-color: var(--background);
+    border-bottom: 1px solid var(--border);
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  :is([data-sidebar-toggle], [data-sidebar-header]) {
+    display: none;
+  }
+
+  [data-sidebar-toggle] {
+    width: 2.5rem;
+    flex-shrink: 0;
+    padding: 0;
+    background: none;
+    color: var(--foreground);
+    border: none;
+    border-radius: var(--radius-button);
+    box-shadow: none;
+
+    &:hover:not(:disabled) {
+      background-color: var(--accent);
+    }
+
+    /* display:block kills the inline baseline gap that nudges icons off-center. */
+    & svg {
+      display: block;
+      width: 1.25rem;
+      height: 1.25rem;
+      margin: auto;
+    }
+  }
+
+  @media (min-width: 769px) {
+    [data-sidebar-layout="always"] {
+      transition: grid-template-columns var(--transition);
+
+      [data-sidebar-toggle] {
+        display: inline-block;
+      }
+
+      > aside[data-sidebar] {
+        transform: translateX(0);
+        opacity: 1;
+        transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
+      }
+
+      &[data-sidebar-open] {
+        grid-template-columns: 0px 1fr;
+        gap: 0;
+
+        > aside[data-sidebar] {
+          overflow: hidden;
+          min-width: 0;
+          transform: translateX(-100%);
+          opacity: 0;
+          visibility: hidden;
+          border-inline-end: none;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    [data-sidebar-layout] {
+      grid-template-columns: 1fr;
+
+      > main {
+        grid-column: 1;
+      }
+
+      > aside[data-sidebar] {
+        grid-column: 1;
+        z-index: 2;
+        width: 16rem;
+        transform: translateX(-100%);
+        visibility: hidden;
+        transition: transform var(--transition), visibility var(--transition);
+        box-shadow: var(--shadow-large);
+      }
+
+      &[data-sidebar-open] > aside[data-sidebar] {
+        transform: translateX(0);
+        visibility: visible;
+      }
+    }
+    [data-sidebar-toggle] { display: inline-block; }
+
+    [data-sidebar-header] {
+      display: flex;
+      align-items: center;
+      gap: var(--space-3);
+      padding: var(--space-3) var(--space-4);
+      border-bottom: 1px solid var(--border);
+    }
+  }
+}

package/css/skeleton.css

@@ -0,0 +1,47 @@
+@layer components {
+  [role="status"].skeleton {
+    --_c: light-dark(
+      color-mix(in srgb, var(--muted) 15%, white),
+      color-mix(in srgb, var(--muted) 90%, var(--foreground))
+    );
+
+    position: relative;
+    overflow: hidden;
+    margin-block-end: var(--space-3);
+    background: var(--muted);
+    border-radius: var(--radius-medium);
+
+    /* Shimmer rides on transform only — composited, no paint per frame. */
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      transform: translateX(-100%);
+      background-image: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--_c) 50%,
+        transparent 100%
+      );
+      animation: shimmer 2s infinite;
+    }
+
+    &.box {
+      width: 4rem;
+      height: 4rem;
+    }
+
+    &.line {
+      height: 1rem;
+      width: 100%;
+    }
+  }
+
+  [role="status"].skeleton:last-child {
+    margin-block-end: 0;
+  }
+
+  @keyframes shimmer {
+    to { transform: translateX(100%); }
+  }
+}

package/css/spinner.css

@@ -0,0 +1,52 @@
+@layer components {
+  [aria-busy="true"] {
+    &::before {
+      content: "";
+      display: inline-block;
+      inset: 0;
+      margin: auto;
+      width: 1.5rem;
+      height: 1.5rem;
+      border: 2px solid var(--muted);
+      border-top-color: var(--primary);
+      border-radius: var(--radius-full);
+      animation: spin 1s linear infinite;
+      text-align: center;
+    }
+
+    &[data-spinner~="small"]::before {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    &[data-spinner~="large"]::before {
+      width: 2rem;
+      height: 2rem;
+      border-width: 3px;
+    }
+
+    &[data-spinner~="overlay"] {
+      position: relative;
+
+      > * {
+        opacity: 0.3;
+
+        /* "disable" all elements in the container while it's busy */
+        pointer-events: none;
+      }
+
+      &::before {
+        position: absolute;
+        inset: 0;
+        margin: auto;
+        z-index: 1;
+      }
+    }
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/css/table.css

@@ -0,0 +1,61 @@
+@layer base {
+  /* Container to get horizontal scroll on small screens. */
+  .table {
+    min-width: 320px;
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: var(--text-7);
+  }
+
+  caption {
+    padding-block-end: var(--space-3);
+    text-align: start;
+    font-weight: var(--font-medium);
+  }
+
+  thead {
+    border-bottom: 1px solid var(--border);
+  }
+
+  th, td {
+    overflow-wrap: break-word;
+  }
+
+  th {
+    padding: var(--space-3) var(--space-2);
+    text-align: start;
+    font-weight: var(--font-medium);
+    color: var(--muted-foreground);
+  }
+
+  td {
+    padding: var(--space-3) var(--space-2);
+    font-variant-numeric: tabular-nums;
+  }
+
+  tbody tr {
+    border-bottom: 1px solid var(--border);
+    transition: background-color var(--transition-fast);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background-color: rgb(from var(--muted) r g b / 0.5);
+    }
+  }
+
+  tfoot {
+    border-top: 1px solid var(--border);
+
+    & :is(th, td) {
+      font-weight: var(--font-medium);
+    }
+  }
+}

package/css/tabs.css

@@ -0,0 +1,57 @@
+@layer components {
+  [role="tablist"] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1);
+    max-width: 100%;
+    overflow-x: auto;
+    background-color: var(--muted);
+    border-radius: var(--radius-button);
+  }
+
+  [role="tab"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    min-height: 2rem;
+    padding: var(--space-1) var(--space-4);
+    font-size: var(--text-7);
+    font-weight: var(--font-medium);
+    white-space: nowrap;
+    background-color: transparent;
+    color: var(--muted-foreground);
+    border: none;
+    border-radius: var(--radius-button);
+    cursor: pointer;
+    transition: background-color var(--transition-fast), color var(--transition-fast);
+
+    & svg {
+      display: block;
+      width: 1.15em;
+      height: 1.15em;
+      flex-shrink: 0;
+    }
+
+    &:hover:not([aria-selected="true"]) {
+      color: var(--foreground);
+    }
+
+    &[aria-selected="true"] {
+      background-color: light-dark(var(--background), #3d3d3d);
+      color: var(--foreground);
+      box-shadow:
+        0 1px 2px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.3)),
+        0 0 0 1px light-dark(rgb(0 0 0 / 0.04), rgb(255 255 255 / 0.06));
+    }
+  }
+
+  [role="tabpanel"] {
+    padding: var(--space-4) 0;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}

package/css/toast.css

@@ -0,0 +1,128 @@
+@layer components {
+  .toast-container {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    pointer-events: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+
+    overflow: visible;
+
+    &::backdrop {
+      display: none;
+    }
+
+    &[data-placement="top-left"] {
+      inset: var(--space-4) auto auto var(--space-4);
+    }
+
+    &[data-placement="top-center"] {
+      inset: var(--space-4) auto auto 50%;
+      transform: translateX(-50%);
+    }
+
+    &[data-placement="top-right"] {
+      inset: var(--space-4) var(--space-4) auto auto;
+    }
+
+    &[data-placement="bottom-left"] {
+      inset: auto auto var(--space-4) var(--space-4);
+      flex-direction: column-reverse;
+    }
+
+    &[data-placement="bottom-center"] {
+      inset: auto auto var(--space-4) 50%;
+      transform: translateX(-50%);
+      flex-direction: column-reverse;
+    }
+
+    &[data-placement="bottom-right"] {
+      inset: auto var(--space-4) var(--space-4) auto;
+      flex-direction: column-reverse;
+    }
+  }
+
+  .toast {
+    --transition: 300ms;
+    --transition-in: calc(var(--transition) - 50ms);
+
+    padding: var(--space-4) var(--space-5);
+    max-width: min(28rem, calc(100vw - var(--space-8)));
+    min-width: min(20rem, calc(100vw - var(--space-8)));
+    pointer-events: auto;
+    background-color: var(--card);
+    border-radius: var(--radius-large);
+    box-shadow: var(--shadow-large);
+    transition: opacity var(--transition-in), transform var(--transition-in), filter var(--transition-in), margin var(--transition-in);
+    line-height: var(--leading-normal);
+    font-size: var(--text-7);
+
+    .toast-title {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      font-weight: var(--font-semibold);
+      margin: 0 0 var(--space-1) 0;
+
+      /* Variant colour as a leading dot instead of an edge stripe. */
+      &::before {
+        content: "";
+        width: 0.5rem;
+        height: 0.5rem;
+        flex-shrink: 0;
+        border-radius: var(--radius-full);
+        background-color: currentColor;
+      }
+    }
+    .toast-message {
+      color: var(--muted-foreground);
+    }
+
+    &[data-variant="success"] .toast-title {
+      color: var(--success);
+    }
+
+    &[data-variant="danger"] .toast-title {
+      color: var(--danger);
+    }
+
+    &[data-variant="warning"] .toast-title {
+      color: var(--warning);
+    }
+
+    & > [data-close] {
+      margin-inline-start: auto;
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      opacity: 0.5;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    margin: var(--space-2) 0;
+
+    &[data-entering] {
+      opacity: 0;
+      transform: translateY(-0.75rem);
+      filter: blur(4px);
+    }
+
+    &[data-exiting] {
+      opacity: 0;
+      margin: 0;
+      padding-block: 0;
+      max-height: 0;
+      overflow: hidden;
+      transform: translateY(-0.75rem);
+      filter: blur(4px);
+      transition: opacity var(--transition), margin var(--transition), padding var(--transition), max-height var(--transition), transform var(--transition), filter var(--transition);
+    }
+  }
+}

package/css/tooltip.css

@@ -0,0 +1,72 @@
+@layer components {
+  [data-tooltip] {
+    position: relative;
+  }
+
+  /* Pill tooltip, no arrow — fades + nudges into place. Hidden state is
+     display:none (not visibility) so the box doesn't widen scroll containers;
+     allow-discrete + @starting-style keep the enter/exit fades. */
+  [data-tooltip]::after {
+    --_from: translateX(-50%) translateY(4px);
+    --_to: translateX(-50%) translateY(0);
+    content: attr(data-tooltip);
+    display: none;
+    position: absolute;
+    inset-inline-start: 50%;
+    inset-block-end: calc(100% + 8px);
+    transform: var(--_from);
+    opacity: 0;
+    transition:
+      opacity var(--transition-fast),
+      transform var(--transition-fast),
+      display var(--transition-fast) allow-discrete;
+    pointer-events: none;
+    z-index: calc(var(--z-modal) + 10);
+    padding: var(--space-1) var(--space-3);
+    font-size: var(--text-8);
+    font-weight: var(--font-medium);
+    line-height: var(--leading-normal);
+    white-space: nowrap;
+    background: var(--foreground);
+    color: var(--background);
+    border-radius: var(--radius-full);
+    box-shadow: var(--shadow-medium);
+  }
+
+  /* Bottom */
+  [data-tooltip][data-tooltip-placement="bottom"]::after {
+    --_from: translateX(-50%) translateY(-4px);
+    inset-block-start: calc(100% + 8px);
+    inset-block-end: auto;
+  }
+
+  /* Left + Right */
+  [data-tooltip]:is([data-tooltip-placement="left"], [data-tooltip-placement="right"])::after {
+    --_to: translateX(0) translateY(-50%);
+    inset-block-start: 50%;
+    inset-block-end: auto;
+  }
+
+  [data-tooltip][data-tooltip-placement="left"]::after {
+    --_from: translateX(4px) translateY(-50%);
+    inset-inline-start: auto;
+    inset-inline-end: calc(100% + 8px);
+  }
+
+  [data-tooltip][data-tooltip-placement="right"]::after {
+    --_from: translateX(-4px) translateY(-50%);
+    inset-inline-start: calc(100% + 8px);
+  }
+
+  [data-tooltip]:is(:hover, :focus-visible)::after {
+    display: block;
+    opacity: 1;
+    transition-delay: 600ms;
+    transform: var(--_to);
+
+    @starting-style {
+      opacity: 0;
+      transform: var(--_from);
+    }
+  }
+}