@pathscale/ui 0.0.162 → 0.0.163

package/dist/accordion/collapse.css

@@ -0,0 +1,248 @@
+@layer components {
+  .collapse-arrow > .collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      transform: translateY(-100%) rotate(45deg);
+      top: 50%;
+      inset-inline-end: 1.4rem;
+      content: "";
+      transform-origin: 75% 75%;
+      box-shadow: 2px 2px;
+      pointer-events: none;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse-arrow > .collapse-title:after {
+      transition-property: all;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 0.2s;
+    }
+    }
+
+  .collapse-plus > .collapse-title:after {
+      position: absolute;
+      display: block;
+      height: 0.5rem;
+      width: 0.5rem;
+      top: 0.9rem;
+      inset-inline-end: 1.4rem;
+      --tw-content: "+";
+      content: var(--tw-content);
+      pointer-events: none;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse-plus > .collapse-title:after {
+      transition-property: all;
+      transition-duration: 300ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    }
+
+  .collapse {
+      display: grid;
+      position: relative;
+      overflow: hidden;
+      border-radius: var(--radius-box, 1rem);
+      width: 100%;
+      grid-template-rows: max-content 0fr;
+      grid-template-columns: minmax(0, 1fr);
+      isolation: isolate;
+    }
+
+  .collapse:not(td, tr, colgroup) {
+      visibility: revert-layer;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse {
+      transition: grid-template-rows 0.2s;
+    }
+    }
+
+  .collapse > input:is([type="checkbox"], [type="radio"]) {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      appearance: none;
+      opacity: 0;
+      z-index: 1;
+      width: 100%;
+      padding: 1rem;
+      padding-inline-end: 3rem;
+      min-height: 1lh;
+      transition: background-color 0.2s ease-out;
+    }
+
+  .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ),
+    .collapse:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked) {
+      grid-template-rows: max-content 1fr;
+    }
+
+  .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > .collapse-content,
+    .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
+      content-visibility: visible;
+      min-height: fit-content;
+    }
+
+  @supports not (content-visibility: visible) {
+    .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > .collapse-content,
+    .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
+      visibility: visible;
+    }
+    }
+
+  .collapse:focus-visible,
+    .collapse:has(> input:is([type="checkbox"], [type="radio"]):focus-visible),
+    .collapse:has(summary:focus-visible) {
+      outline-color: var(--color-base-content);
+      outline-style: solid;
+      outline-width: 2px;
+      outline-offset: 2px;
+    }
+
+  .collapse:not(.collapse-close) > input[type="checkbox"],
+    .collapse:not(.collapse-close) > input[type="radio"]:not(:checked),
+    .collapse:not(.collapse-close) > .collapse-title {
+      cursor: pointer;
+    }
+
+  .collapse[tabindex]:focus:not(.collapse-close, .collapse[open]) > .collapse-title,
+    .collapse[tabindex]:focus-within:not(.collapse-close, .collapse[open]) > .collapse-title {
+      cursor: unset;
+    }
+
+  .collapse:is( [open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close) ) > :where(.collapse-content),
+    .collapse:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
+      padding-bottom: 1rem;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse:is([open]).collapse-arrow > .collapse-title:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse.collapse-open.collapse-arrow > .collapse-title:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+    }
+
+  .collapse.collapse-open.collapse-plus > .collapse-title:after {
+      --tw-content: "−";
+      content: var(--tw-content);
+    }
+
+  .collapse[tabindex].collapse-arrow:focus:not(.collapse-close) > .collapse-title:after,
+    .collapse.collapse-arrow[tabindex]:focus-within:not(.collapse-close) > .collapse-title:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+
+  .collapse.collapse-arrow:not(.collapse-close) > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after {
+      transform: translateY(-50%) rotate(225deg);
+    }
+
+  .collapse[open].collapse-plus > .collapse-title:after {
+      --tw-content: "−";
+      content: var(--tw-content);
+    }
+
+  .collapse[tabindex].collapse-plus:focus:not(.collapse-close) > .collapse-title:after {
+      --tw-content: "−";
+      content: var(--tw-content);
+    }
+
+  .collapse.collapse-plus:not(.collapse-close) > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after {
+      --tw-content: "−";
+      content: var(--tw-content);
+    }
+
+  .collapse:is(details) {
+      width: 100%;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse:is(details)::details-content {
+      transition: content-visibility 0.2s allow-discrete, visibility 0.2s allow-discrete, min-height 0.2s ease-out allow-discrete, padding 0.1s ease-out 20ms, background-color 0.2s ease-out, height 0.2s;
+      height: 0;
+      interpolate-size: allow-keywords;
+    }
+    .collapse:is(details):where([open])::details-content {
+      height: auto;
+    }
+    }
+
+  .collapse:is(details) summary {
+      position: relative;
+      display: block;
+    }
+
+  .collapse:is(details) summary::-webkit-details-marker {
+      display: none;
+    }
+
+  .collapse:is(details) > .collapse-content {
+      content-visibility: visible;
+    }
+
+  .collapse:is(details) summary {
+      outline: none;
+    }
+
+  .collapse-content {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      content-visibility: hidden;
+      grid-column-start: 1;
+      grid-row-start: 2;
+      min-height: 0;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      cursor: unset;
+    }
+
+  @supports not (content-visibility: hidden) {
+    .collapse-content {
+      visibility: hidden;
+    }
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .collapse-content {
+      transition: content-visibility 0.2s allow-discrete, visibility 0.2s allow-discrete, min-height 0.2s ease-out allow-discrete, padding 0.1s ease-out 20ms, background-color 0.2s ease-out;
+    }
+    }
+
+  .collapse-open {
+      grid-template-rows: max-content 1fr;
+    }
+
+  .collapse-open > .collapse-content {
+      content-visibility: visible;
+      min-height: fit-content;
+      padding-bottom: 1rem;
+    }
+
+  @supports not (content-visibility: visible) {
+    .collapse-open > .collapse-content {
+      visibility: visible;
+    }
+    }
+
+  .collapse {
+      visibility: collapse;
+    }
+
+  .collapse-title {
+      grid-column-start: 1;
+      grid-row-start: 1;
+      position: relative;
+      width: 100%;
+      padding: 1rem;
+      padding-inline-end: 3rem;
+      min-height: 1lh;
+      transition: background-color 0.2s ease-out;
+    }
+}

package/dist/alert/alert.css

@@ -0,0 +1,123 @@
+@layer components {
+  .alert {
+      border-width: var(--border);
+      border-color: var(--alert-border-color, var(--color-base-200));
+      border-style: solid;
+      --alert-border-color: var(--color-base-200);
+      display: grid;
+      align-items: center;
+      gap: calc(0.25rem * 4);
+      border-radius: var(--radius-box);
+      padding-inline: calc(0.25rem * 4);
+      padding-block: calc(0.25rem * 3);
+      color: var(--color-base-content);
+      background-color: var(--alert-color, var(--color-base-200));
+      justify-content: start;
+      justify-items: start;
+      grid-auto-flow: column;
+      grid-template-columns: auto;
+      text-align: start;
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      background-size: auto, calc(var(--noise) * 100%);
+      background-image: none, var(--fx-noise);
+      box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .alert {
+      box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px color-mix( in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000 ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
+    }
+    }
+
+  .alert:has(:nth-child(2)) {
+      grid-template-columns: auto minmax(auto, 1fr);
+    }
+
+  .alert-horizontal {
+      justify-content: start;
+      justify-items: start;
+      grid-auto-flow: column;
+      grid-template-columns: auto;
+      text-align: start;
+    }
+
+  .alert-horizontal:has(:nth-child(2)) {
+      grid-template-columns: auto minmax(auto, 1fr);
+    }
+
+  .alert-vertical {
+      justify-content: center;
+      justify-items: center;
+      grid-auto-flow: row;
+      grid-template-columns: auto;
+      text-align: center;
+    }
+
+  .alert-vertical:has(:nth-child(2)) {
+      grid-template-columns: auto;
+    }
+
+  .alert-dash {
+      background-color: transparent;
+      color: var(--alert-color);
+      border-style: dashed;
+      box-shadow: none;
+      background-image: none;
+    }
+
+  .alert-outline {
+      background-color: transparent;
+      color: var(--alert-color);
+      box-shadow: none;
+      background-image: none;
+    }
+
+  .alert-soft {
+      color: var(--alert-color, var(--color-base-content));
+      background: var(--alert-color, var(--color-base-content));
+      --alert-border-color: var(--alert-color, var(--color-base-content));
+      box-shadow: none;
+      background-image: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .alert-soft {
+      background: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100) );
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .alert-soft {
+      --alert-border-color: color-mix(
+        in oklab,
+        var(--alert-color, var(--color-base-content)) 10%,
+        var(--color-base-100)
+        );
+    }
+    }
+
+  .alert-error {
+      color: var(--color-error-content);
+      --alert-border-color: var(--color-error);
+      --alert-color: var(--color-error);
+    }
+
+  .alert-info {
+      color: var(--color-info-content);
+      --alert-border-color: var(--color-info);
+      --alert-color: var(--color-info);
+    }
+
+  .alert-success {
+      color: var(--color-success-content);
+      --alert-border-color: var(--color-success);
+      --alert-color: var(--color-success);
+    }
+
+  .alert-warning {
+      color: var(--color-warning-content);
+      --alert-border-color: var(--color-warning);
+      --alert-color: var(--color-warning);
+    }
+}

package/dist/avatar/avatar.css

@@ -0,0 +1,58 @@
+@layer components {
+  .avatar-offline:before {
+      content: "";
+      position: absolute;
+      z-index: 1;
+      display: block;
+      border-radius: calc(infinity * 1px);
+      background-color: var(--color-base-300);
+      outline: 2px solid var(--color-base-100);
+      width: 15%;
+      height: 15%;
+      top: 7%;
+      right: 7%;
+    }
+
+  .avatar-online:before {
+      content: "";
+      position: absolute;
+      z-index: 1;
+      display: block;
+      border-radius: calc(infinity * 1px);
+      background-color: var(--color-success);
+      outline: 2px solid var(--color-base-100);
+      width: 15%;
+      height: 15%;
+      top: 7%;
+      right: 7%;
+    }
+
+  .avatar {
+      position: relative;
+      display: inline-flex;
+      vertical-align: middle;
+    }
+
+  .avatar > div {
+      display: block;
+      aspect-ratio: 1 / 1;
+      overflow: hidden;
+    }
+
+  .avatar img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+    }
+
+  .avatar-group {
+      display: flex;
+      overflow: hidden;
+    }
+
+  .avatar-group .avatar {
+      overflow: hidden;
+      border-radius: calc(infinity * 1px);
+      border: 4px solid var(--color-base-100);
+    }
+}

package/dist/badge/badge.css

@@ -0,0 +1,128 @@
+@layer components {
+  .badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: calc(0.25rem * 2);
+      border-radius: var(--radius-selector);
+      vertical-align: middle;
+      color: var(--badge-fg);
+      border: var(--border) solid var(--badge-color, var(--color-base-200));
+      font-size: 0.875rem;
+      width: fit-content;
+      background-size: auto, calc(var(--noise) * 100%);
+      background-image: none, var(--fx-noise);
+      background-color: var(--badge-bg);
+      --badge-bg: var(--badge-color, var(--color-base-100));
+      --badge-fg: var(--color-base-content);
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+      height: var(--size);
+      padding-inline: calc(var(--size) / 2 - var(--border));
+    }
+
+  .badge-dash {
+      color: var(--badge-color);
+      --badge-bg: #0000;
+      background-image: none;
+      border-color: currentColor;
+      border-style: dashed;
+    }
+
+  .badge-ghost {
+      border-color: var(--color-base-200);
+      background-color: var(--color-base-200);
+      color: var(--color-base-content);
+      background-image: none;
+    }
+
+  .badge-soft {
+      color: var(--badge-color, var(--color-base-content));
+      background-color: var(--badge-color, var(--color-base-content));
+      border-color: var(--badge-color, var(--color-base-content));
+      background-image: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .badge-soft {
+      background-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100) );
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .badge-soft {
+      border-color: color-mix( in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100) );
+    }
+    }
+
+  .badge-outline {
+      color: var(--badge-color);
+      --badge-bg: #0000;
+      background-image: none;
+      border-color: currentColor;
+    }
+
+  .badge-lg {
+      --size: calc(var(--size-selector, 0.25rem) * 7);
+      font-size: 1rem;
+    }
+
+  .badge-md {
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+      font-size: 0.875rem;
+    }
+
+  .badge-sm {
+      --size: calc(var(--size-selector, 0.25rem) * 5);
+      font-size: 0.75rem;
+    }
+
+  .badge-xl {
+      --size: calc(var(--size-selector, 0.25rem) * 8);
+      font-size: 1.125rem;
+    }
+
+  .badge-xs {
+      --size: calc(var(--size-selector, 0.25rem) * 4);
+      font-size: 0.625rem;
+    }
+
+  .badge-accent {
+      --badge-color: var(--color-accent);
+      --badge-fg: var(--color-accent-content);
+    }
+
+  .badge-error {
+      --badge-color: var(--color-error);
+      --badge-fg: var(--color-error-content);
+    }
+
+  .badge-info {
+      --badge-color: var(--color-info);
+      --badge-fg: var(--color-info-content);
+    }
+
+  .badge-neutral {
+      --badge-color: var(--color-neutral);
+      --badge-fg: var(--color-neutral-content);
+    }
+
+  .badge-primary {
+      --badge-color: var(--color-primary);
+      --badge-fg: var(--color-primary-content);
+    }
+
+  .badge-secondary {
+      --badge-color: var(--color-secondary);
+      --badge-fg: var(--color-secondary-content);
+    }
+
+  .badge-success {
+      --badge-color: var(--color-success);
+      --badge-fg: var(--color-success-content);
+    }
+
+  .badge-warning {
+      --badge-color: var(--color-warning);
+      --badge-fg: var(--color-warning-content);
+    }
+}

package/dist/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,85 @@
+@layer components {
+  .breadcrumbs {
+      max-width: 100%;
+      overflow-x: auto;
+      padding-block: calc(0.25rem * 2);
+    }
+
+  .breadcrumbs > menu,
+    .breadcrumbs > ul,
+    .breadcrumbs > ol {
+      display: flex;
+      min-height: min-content;
+      align-items: center;
+      white-space: nowrap;
+    }
+
+  .breadcrumbs > menu > li,
+    .breadcrumbs > ul > li,
+    .breadcrumbs > ol > li {
+      display: flex;
+      align-items: center;
+    }
+
+  .breadcrumbs > menu > li > *,
+    .breadcrumbs > ul > li > *,
+    .breadcrumbs > ol > li > * {
+      display: flex;
+      cursor: pointer;
+      align-items: center;
+      gap: calc(0.25rem * 2);
+    }
+
+  @media (hover: hover) {
+    .breadcrumbs > menu > li > *:hover,
+    .breadcrumbs > ul > li > *:hover,
+    .breadcrumbs > ol > li > *:hover {
+      text-decoration-line: underline;
+    }
+    }
+
+  .breadcrumbs > menu > li > *:focus,
+    .breadcrumbs > ul > li > *:focus,
+    .breadcrumbs > ol > li > *:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .breadcrumbs > menu > li > *:focus,
+    .breadcrumbs > ul > li > *:focus,
+    .breadcrumbs > ol > li > *:focus {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .breadcrumbs > menu > li > *:focus-visible,
+    .breadcrumbs > ul > li > *:focus-visible,
+    .breadcrumbs > ol > li > *:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+
+  .breadcrumbs > menu > li + *:before,
+    .breadcrumbs > ul > li + *:before,
+    .breadcrumbs > ol > li + *:before {
+      content: "";
+      margin-inline-start: calc(0.25rem * 2);
+      margin-inline-end: calc(0.25rem * 3);
+      display: block;
+      height: calc(0.25rem * 1.5);
+      width: calc(0.25rem * 1.5);
+      opacity: 40%;
+      rotate: 45deg;
+      border-top: 1px solid;
+      border-right: 1px solid;
+      background-color: #0000;
+    }
+
+  [dir="rtl"] .breadcrumbs > menu > li + *:before,
+    [dir="rtl"] .breadcrumbs > ul > li + *:before,
+    [dir="rtl"] .breadcrumbs > ol > li + *:before {
+      rotate: -135deg;
+    }
+}