@pathscale/ui 0.0.161 → 0.0.163

package/dist/dock/dock.css

@@ -0,0 +1,147 @@
+@layer components {
+  .dock {
+      position: fixed;
+      right: calc(0.25rem * 0);
+      bottom: calc(0.25rem * 0);
+      left: calc(0.25rem * 0);
+      z-index: 1;
+      display: flex;
+      width: 100%;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-around;
+      background-color: var(--color-base-100);
+      padding: calc(0.25rem * 2);
+      color: currentcolor;
+      border-top: 0.5px solid var(--color-base-content);
+      height: 4rem;
+      height: calc(4rem + env(safe-area-inset-bottom));
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dock {
+      border-top: 0.5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000);
+    }
+    }
+
+  .dock > * {
+      position: relative;
+      margin-bottom: calc(0.25rem * 2);
+      display: flex;
+      height: 100%;
+      max-width: calc(0.25rem * 32);
+      flex-shrink: 1;
+      flex-basis: 100%;
+      cursor: pointer;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 1px;
+      border-radius: var(--radius-box);
+      background-color: transparent;
+      transition: opacity 0.2s ease-out;
+    }
+
+  @media (hover: hover) {
+    .dock > *:hover {
+      opacity: 80%;
+    }
+    }
+
+  .dock > *[aria-disabled="true"],
+    .dock > *[aria-disabled="true"]:hover,
+    .dock > *[disabled],
+    .dock > *[disabled]:hover {
+      pointer-events: none;
+      color: var(--color-base-content);
+      opacity: 100%;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dock > *[aria-disabled="true"],
+    .dock > *[aria-disabled="true"]:hover,
+    .dock > *[disabled],
+    .dock > *[disabled]:hover {
+      color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    }
+    }
+
+  .dock > * .dock-label {
+      font-size: 0.6875rem;
+    }
+
+  .dock > *:after {
+      content: "";
+      position: absolute;
+      height: calc(0.25rem * 1);
+      width: calc(0.25rem * 6);
+      border-radius: calc(infinity * 1px);
+      background-color: transparent;
+      bottom: 0.2rem;
+      border-top: 3px solid transparent;
+      transition: background-color 0.1s ease-out, text-color 0.1s ease-out, width 0.1s ease-out;
+    }
+
+  .dock-sm {
+      height: calc(0.25rem * 14);
+      height: 3.5rem;
+      height: calc(3.5rem + env(safe-area-inset-bottom));
+    }
+
+  .dock-sm .dock-active:after {
+      bottom: -0.1rem;
+    }
+
+  .dock-sm .dock-label {
+      font-size: 0.625rem;
+    }
+
+  .dock-lg {
+      height: 4.5rem;
+      height: calc(4.5rem + env(safe-area-inset-bottom));
+    }
+
+  .dock-lg .dock-active:after {
+      bottom: 0.4rem;
+    }
+
+  .dock-lg .dock-label {
+      font-size: 0.6875rem;
+    }
+
+  .dock-xl {
+      height: 5rem;
+      height: calc(5rem + env(safe-area-inset-bottom));
+    }
+
+  .dock-xl .dock-active:after {
+      bottom: 0.4rem;
+    }
+
+  .dock-xl .dock-label {
+      font-size: 0.75rem;
+    }
+
+  .dock-xs {
+      height: 3rem;
+      height: calc(3rem + env(safe-area-inset-bottom));
+    }
+
+  .dock-xs .dock-active:after {
+      bottom: -0.1rem;
+    }
+
+  .dock-xs .dock-label {
+      font-size: 0.625rem;
+    }
+
+  .dock-md {
+      height: 4rem;
+      height: calc(4rem + env(safe-area-inset-bottom));
+    }
+
+  .dock-md .dock-label {
+      font-size: 0.6875rem;
+    }
+}

package/dist/drawer/drawer.css

@@ -0,0 +1,184 @@
+@layer components {
+  .drawer-side {
+      pointer-events: none;
+      visibility: hidden;
+      position: fixed;
+      inset-inline-start: calc(0.25rem * 0);
+      top: calc(0.25rem * 0);
+      z-index: 10;
+      grid-column-start: 1;
+      grid-row-start: 1;
+      display: grid;
+      width: 100%;
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+      grid-template-rows: repeat(1, minmax(0, 1fr));
+      align-items: flex-start;
+      justify-items: start;
+      overscroll-behavior: contain;
+      background-color: transparent;
+      opacity: 0%;
+      transition: opacity 0.2s ease-out 0.1s allow-discrete, visibility 0.3s ease-out 0.1s allow-discrete;
+      height: 100vh;
+      height: 100dvh;
+    }
+
+  :where(.drawer-side) {
+      overflow-x: hidden;
+      overflow-y: hidden;
+    }
+
+  .drawer-side > .drawer-overlay {
+      position: sticky;
+      top: calc(0.25rem * 0);
+      cursor: pointer;
+      place-self: stretch;
+      background-color: oklch(0% 0 0 / 40%);
+    }
+
+  .drawer-side > * {
+      grid-column-start: 1;
+      grid-row-start: 1;
+    }
+
+  .drawer-side > :not(.drawer-overlay) {
+      will-change: transform;
+      transition: translate 0.3s ease-out, width 0.2s ease-out;
+      translate: -100%;
+    }
+
+  [dir="rtl"] .drawer-side > :not(.drawer-overlay) {
+      translate: 100%;
+    }
+
+  .drawer-open > .drawer-toggle:checked ~ .drawer-side {
+      scrollbar-color: revert-layer;
+    }
+
+  :root:has(.drawer-open > .drawer-toggle:checked) {
+      --page-overflow: revert-layer;
+      --page-scroll-gutter: revert-layer;
+      --page-scroll-bg: revert-layer;
+      --page-scroll-transition: revert-layer;
+      --page-has-backdrop: revert-layer;
+      animation: revert-layer;
+      animation-timeline: revert-layer;
+    }
+
+  .drawer-open > .drawer-side {
+      overflow-y: auto;
+    }
+
+  .drawer-open > .drawer-toggle {
+      display: none;
+    }
+
+  .drawer-open > .drawer-toggle ~ .drawer-side {
+      pointer-events: auto;
+      visibility: visible;
+      position: sticky;
+      display: block;
+      width: auto;
+      overscroll-behavior: auto;
+      opacity: 100%;
+    }
+
+  .drawer-open > .drawer-toggle ~ .drawer-side > .drawer-overlay {
+      cursor: default;
+      background-color: transparent;
+    }
+
+  .drawer-open > .drawer-toggle:checked ~ .drawer-side {
+      pointer-events: auto;
+      visibility: visible;
+    }
+
+  .drawer-open > .drawer-toggle ~ .drawer-side > :not(.drawer-overlay) {
+      translate: 0%;
+    }
+
+  [dir="rtl"] .drawer-open > .drawer-toggle ~ .drawer-side > :not(.drawer-overlay) {
+      translate: 0%;
+    }
+
+  .drawer-toggle {
+      position: fixed;
+      height: calc(0.25rem * 0);
+      width: calc(0.25rem * 0);
+      appearance: none;
+      opacity: 0%;
+    }
+
+  :where(.drawer-toggle:checked ~ .drawer-side) {
+      scrollbar-color: currentColor oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * 0.4));
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.drawer-toggle:checked ~ .drawer-side) {
+      scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * 0.4));
+    }
+    }
+
+  :where(:root:has(.drawer-toggle:checked)) {
+      --page-has-backdrop: 1;
+      --page-overflow: hidden;
+      --page-scroll-bg: var(--page-scroll-bg-on);
+      --page-scroll-gutter: stable;
+      --page-scroll-transition: var(--page-scroll-transition-on);
+      animation: set-page-has-scroll forwards;
+      animation-timeline: scroll();
+    }
+
+  :where(.drawer-toggle:checked ~ .drawer-side) {
+      pointer-events: auto;
+      visibility: visible;
+      overflow-y: auto;
+      opacity: 100%;
+    }
+
+  :where(.drawer-toggle:checked ~ .drawer-side) > :not(.drawer-overlay) {
+      translate: 0%;
+    }
+
+  .drawer-toggle:focus-visible ~ .drawer-content label.drawer-button {
+      outline: 2px solid;
+      outline-offset: 2px;
+    }
+
+  .drawer {
+      position: relative;
+      display: grid;
+      width: 100%;
+      grid-auto-columns: max-content auto;
+    }
+
+  .drawer-content {
+      grid-column-start: 2;
+      grid-row-start: 1;
+      min-width: calc(0.25rem * 0);
+    }
+
+  .drawer-end {
+      grid-auto-columns: auto max-content;
+    }
+
+  .drawer-end > .drawer-toggle ~ .drawer-content {
+      grid-column-start: 1;
+    }
+
+  .drawer-end > .drawer-toggle ~ .drawer-side {
+      grid-column-start: 2;
+      justify-items: end;
+    }
+
+  .drawer-end > .drawer-toggle ~ .drawer-side > :not(.drawer-overlay) {
+      translate: 100%;
+    }
+
+  [dir="rtl"] .drawer-end > .drawer-toggle ~ .drawer-side > :not(.drawer-overlay) {
+      translate: -100%;
+    }
+
+  .drawer-end > .drawer-toggle:checked ~ .drawer-side > :not(.drawer-overlay) {
+      translate: 0%;
+    }
+}

package/dist/dropdown/dropdown.css

@@ -0,0 +1,253 @@
+@layer components {
+  .dropdown {
+      position: relative;
+      display: inline-block;
+      position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
+    }
+
+  .dropdown > *:not(:has(~ [class*="dropdown-content"])):focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .dropdown > *:not(:has(~ [class*="dropdown-content"])):focus {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .dropdown .dropdown-content {
+      position: absolute;
+    }
+
+  .dropdown.dropdown-close .dropdown-content,
+    .dropdown:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content,
+    .dropdown.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible) ~ .dropdown-content {
+      display: none;
+      transform-origin: top;
+      opacity: 0%;
+      scale: 95%;
+    }
+
+  .dropdown[popover],
+    .dropdown .dropdown-content {
+      z-index: 999;
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .dropdown[popover],
+    .dropdown .dropdown-content {
+      animation: dropdown 0.2s;
+      transition-property: opacity, scale, display;
+      transition-behavior: allow-discrete;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    }
+
+  @starting-style {
+    .dropdown[popover],
+    .dropdown .dropdown-content {
+      scale: 95%;
+      opacity: 0;
+    }
+    }
+
+  .dropdown:not(.dropdown-close).dropdown-open > [tabindex]:first-child,
+    .dropdown:not(.dropdown-close):not(.dropdown-hover):focus > [tabindex]:first-child,
+    .dropdown:not(.dropdown-close):focus-within > [tabindex]:first-child {
+      pointer-events: none;
+    }
+
+  .dropdown:not(.dropdown-close).dropdown-open .dropdown-content,
+    .dropdown:not(.dropdown-close):not(.dropdown-hover):focus .dropdown-content,
+    .dropdown:not(.dropdown-close):focus-within .dropdown-content {
+      opacity: 100%;
+      scale: 100%;
+    }
+
+  .dropdown:not(.dropdown-close).dropdown-hover:hover .dropdown-content {
+      opacity: 100%;
+      scale: 100%;
+    }
+
+  .dropdown:is(details) summary::-webkit-details-marker {
+      display: none;
+    }
+
+  .dropdown:where([popover]) {
+      background: #0000;
+    }
+
+  .dropdown[popover] {
+      position: fixed;
+      color: inherit;
+    }
+
+  @supports not (position-area: bottom) {
+    .dropdown[popover].dropdown-close,
+    .dropdown[popover].dropdown-open:not(:popover-open) {
+      display: none;
+      transform-origin: top;
+      opacity: 0%;
+      scale: 95%;
+    }
+    .dropdown[popover]::backdrop {
+      background-color: color-mix(in oklab, #000 30%, #0000);
+    }
+    }
+
+  .dropdown[popover].dropdown-close,
+    .dropdown[popover]:not(.dropdown-open, :popover-open) {
+      display: none;
+      transform-origin: top;
+      opacity: 0%;
+      scale: 95%;
+    }
+
+  .dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-bottom;
+    }
+
+  .dropdown-right .dropdown-content {
+      inset-inline-start: 100%;
+      top: calc(0.25rem * 0);
+      bottom: auto;
+      transform-origin: 0;
+    }
+
+  .dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-bottom;
+    }
+
+  .dropdown-left .dropdown-content {
+      inset-inline-end: 100%;
+      top: calc(0.25rem * 0);
+      bottom: auto;
+      transform-origin: 100%;
+    }
+
+  .dropdown-center {
+      --anchor-h: center;
+    }
+
+  .dropdown-center :where(.dropdown-content) {
+      inset-inline-end: calc(1/2 * 100%);
+      translate: 50% 0;
+    }
+
+  [dir="rtl"] .dropdown-center :where(.dropdown-content) {
+      translate: -50% 0;
+    }
+
+  .dropdown-center.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: center;
+    }
+
+  .dropdown-center.dropdown-left .dropdown-content {
+      top: auto;
+      bottom: calc(1/2 * 100%);
+      translate: 0 50%;
+    }
+
+  .dropdown-center.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: center;
+    }
+
+  .dropdown-center.dropdown-right .dropdown-content {
+      top: auto;
+      bottom: calc(1/2 * 100%);
+      translate: 0 50%;
+    }
+
+  .dropdown-end {
+      --anchor-h: span-left;
+    }
+
+  .dropdown-end :where(.dropdown-content) {
+      inset-inline-end: calc(0.25rem * 0);
+      translate: 0 0;
+    }
+
+  [dir="rtl"] .dropdown-end :where(.dropdown-content) {
+      translate: 0 0;
+    }
+
+  .dropdown-end.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-top;
+    }
+
+  .dropdown-end.dropdown-left .dropdown-content {
+      top: auto;
+      bottom: calc(0.25rem * 0);
+    }
+
+  .dropdown-end.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-top;
+    }
+
+  .dropdown-end.dropdown-right .dropdown-content {
+      top: auto;
+      bottom: calc(0.25rem * 0);
+    }
+
+  .dropdown-start {
+      --anchor-h: span-right;
+    }
+
+  .dropdown-start :where(.dropdown-content) {
+      inset-inline-end: auto;
+      translate: 0 0;
+    }
+
+  [dir="rtl"] .dropdown-start :where(.dropdown-content) {
+      translate: 0 0;
+    }
+
+  .dropdown-start.dropdown-left {
+      --anchor-h: left;
+      --anchor-v: span-bottom;
+    }
+
+  .dropdown-start.dropdown-left .dropdown-content {
+      top: calc(0.25rem * 0);
+      bottom: auto;
+    }
+
+  .dropdown-start.dropdown-right {
+      --anchor-h: right;
+      --anchor-v: span-bottom;
+    }
+
+  .dropdown-start.dropdown-right .dropdown-content {
+      top: calc(0.25rem * 0);
+      bottom: auto;
+    }
+
+  .dropdown-bottom {
+      --anchor-v: bottom;
+    }
+
+  .dropdown-bottom .dropdown-content {
+      top: 100%;
+      bottom: auto;
+      transform-origin: top;
+    }
+
+  .dropdown-top {
+      --anchor-v: top;
+    }
+
+  .dropdown-top .dropdown-content {
+      top: auto;
+      bottom: 100%;
+      transform-origin: bottom;
+    }
+}