@pathscale/ui 1.2.10 → 1.2.11

package/dist/components/button/Button.css

@@ -1,194 +1,194 @@
-@layer components {
-  .button {
-    position: relative;
-    isolation: isolate;
-    display: inline-flex;
-    height: 2.5rem;
-    width: fit-content;
-    transform-origin: center;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    white-space: nowrap;
-    border-radius: 1.5rem;
-    border: 0;
-    padding-inline: 1rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 1;
-    user-select: none;
-    outline: none;
-    cursor: pointer;
-    touch-action: manipulation;
-    transition:
-      transform 250ms ease,
-      background-color 100ms ease,
-      box-shadow 100ms ease,
-      color 100ms ease,
-      opacity 100ms ease;
-    --button-bg: transparent;
-    --button-bg-hover: var(--button-bg);
-    --button-bg-pressed: var(--button-bg-hover);
-    --button-fg: currentColor;
-    --button-border: transparent;
-    background-color: var(--button-bg);
-    border: 1px solid var(--button-border);
-    color: var(--button-fg);
-  }
-
-  .button:focus-visible,
-  .button[data-focus-visible="true"] {
-    outline: 2px solid currentColor;
-    outline-offset: 2px;
-  }
-
-  .button:disabled,
-  .button[aria-disabled="true"] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .button[data-pending="true"] {
-    cursor: progress;
-  }
-
-  .button:active,
-  .button[data-pressed="true"] {
-    transform: scale(0.97);
-    background-color: var(--button-bg-pressed);
-  }
-
-  @media (hover: hover) {
-    .button:hover,
-    .button[data-hovered="true"] {
-      background-color: var(--button-bg-hover);
-    }
-  }
-
-  .button__icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    margin-block: 0.125rem;
-    height: 1rem;
-    width: 1rem;
-    flex-shrink: 0;
-    align-self: center;
-  }
-
-  .button__icon > * {
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-  }
-
-  .button--sm {
-    height: 2.25rem;
-    padding-inline: 0.75rem;
-  }
-
-  .button--md {
-  }
-
-  .button--lg {
-    height: 2.75rem;
-    font-size: 1rem;
-    padding-inline: 1.125rem;
-  }
-
-  .button--sm:active,
-  .button--sm[data-pressed="true"] {
-    transform: scale(0.98);
-  }
-
-  .button--lg:active,
-  .button--lg[data-pressed="true"] {
-    transform: scale(0.96);
-  }
-
-  .button--primary {
-    --button-bg: var(--color-primary);
-    --button-bg-hover: color-mix(in oklab, var(--color-primary), #000 8%);
-    --button-bg-pressed: color-mix(in oklab, var(--color-primary), #000 12%);
-    --button-fg: var(--color-primary-content);
-  }
-
-  .button--secondary {
-    --button-bg: var(--color-base-200);
-    --button-bg-hover: var(--color-base-300);
-    --button-bg-pressed: color-mix(in oklab, var(--color-base-300), #000 10%);
-    --button-fg: var(--color-base-content);
-  }
-
-  .button--tertiary {
-    --button-bg: var(--color-base-100);
-    --button-bg-hover: var(--color-base-200);
-    --button-bg-pressed: var(--color-base-300);
-    --button-fg: var(--color-base-content);
-    --button-border: var(--color-base-300);
-  }
-
-  .button--outline {
-    --button-bg: transparent;
-    --button-bg-hover: color-mix(in oklab, var(--color-base-300), transparent 35%);
-    --button-bg-pressed: color-mix(in oklab, var(--color-base-300), transparent 10%);
-    --button-fg: var(--color-base-content);
-    --button-border: var(--color-base-300);
-  }
-
-  .button--ghost {
-    --button-bg: transparent;
-    --button-bg-hover: var(--color-base-200);
-    --button-bg-pressed: var(--color-base-300);
-    --button-fg: var(--color-base-content);
-  }
-
-  .button--danger {
-    --button-bg: var(--color-error);
-    --button-bg-hover: color-mix(in oklab, var(--color-error), #000 8%);
-    --button-bg-pressed: color-mix(in oklab, var(--color-error), #000 12%);
-    --button-fg: var(--color-error-content);
-  }
-
-  .button--danger-soft {
-    --button-bg: color-mix(in oklab, var(--color-error), var(--color-base-100) 86%);
-    --button-bg-hover: color-mix(in oklab, var(--color-error), var(--color-base-100) 80%);
-    --button-bg-pressed: color-mix(in oklab, var(--color-error), var(--color-base-100) 74%);
-    --button-fg: var(--color-error);
-  }
-
-  .button--icon-only {
-    width: 2.5rem;
-    padding-inline: 0;
-  }
-
-  .button--icon-only.button--sm {
-    width: 2.25rem;
-  }
-
-  .button--icon-only.button--lg {
-    width: 2.75rem;
-  }
-
-  .button--full-width {
-    width: 100%;
-  }
-
-  .button__spinner {
-    display: inline-block;
-    width: 1rem;
-    height: 1rem;
-    border-radius: 9999px;
-    border: 2px solid currentColor;
-    border-right-color: transparent;
-    animation: button-spinner 700ms linear infinite;
-    flex-shrink: 0;
-  }
-
-  @keyframes button-spinner {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-}
+@layer components {
+  .button {
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    height: 2.5rem;
+    width: fit-content;
+    transform-origin: center;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    white-space: nowrap;
+    border-radius: 1.5rem;
+    border: 0;
+    padding-inline: 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1;
+    user-select: none;
+    outline: none;
+    cursor: pointer;
+    touch-action: manipulation;
+    transition:
+      transform 250ms ease,
+      background-color 100ms ease,
+      box-shadow 100ms ease,
+      color 100ms ease,
+      opacity 100ms ease;
+    --button-bg: transparent;
+    --button-bg-hover: var(--button-bg);
+    --button-bg-pressed: var(--button-bg-hover);
+    --button-fg: currentColor;
+    --button-border: transparent;
+    background-color: var(--button-bg);
+    border: 1px solid var(--button-border);
+    color: var(--button-fg);
+  }
+
+  .button:focus-visible,
+  .button[data-focus-visible="true"] {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  .button:disabled,
+  .button[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .button[data-pending="true"] {
+    cursor: progress;
+  }
+
+  .button:active,
+  .button[data-pressed="true"] {
+    transform: scale(0.97);
+    background-color: var(--button-bg-pressed);
+  }
+
+  @media (hover: hover) {
+    .button:hover,
+    .button[data-hovered="true"] {
+      background-color: var(--button-bg-hover);
+    }
+  }
+
+  .button__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    margin-block: 0.125rem;
+    height: 1rem;
+    width: 1rem;
+    flex-shrink: 0;
+    align-self: center;
+  }
+
+  .button__icon > * {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  .button--sm {
+    height: 2.25rem;
+    padding-inline: 0.75rem;
+  }
+
+  .button--md {
+  }
+
+  .button--lg {
+    height: 2.75rem;
+    font-size: 1rem;
+    padding-inline: 1.125rem;
+  }
+
+  .button--sm:active,
+  .button--sm[data-pressed="true"] {
+    transform: scale(0.98);
+  }
+
+  .button--lg:active,
+  .button--lg[data-pressed="true"] {
+    transform: scale(0.96);
+  }
+
+  .button--primary {
+    --button-bg: var(--color-primary);
+    --button-bg-hover: color-mix(in oklab, var(--color-primary), #000 8%);
+    --button-bg-pressed: color-mix(in oklab, var(--color-primary), #000 12%);
+    --button-fg: var(--color-primary-content);
+  }
+
+  .button--secondary {
+    --button-bg: var(--color-base-200);
+    --button-bg-hover: var(--color-base-300);
+    --button-bg-pressed: color-mix(in oklab, var(--color-base-300), #000 10%);
+    --button-fg: var(--color-base-content);
+  }
+
+  .button--tertiary {
+    --button-bg: var(--color-base-100);
+    --button-bg-hover: var(--color-base-200);
+    --button-bg-pressed: var(--color-base-300);
+    --button-fg: var(--color-base-content);
+    --button-border: var(--color-base-300);
+  }
+
+  .button--outline {
+    --button-bg: transparent;
+    --button-bg-hover: color-mix(in oklab, var(--color-base-300), transparent 35%);
+    --button-bg-pressed: color-mix(in oklab, var(--color-base-300), transparent 10%);
+    --button-fg: var(--color-base-content);
+    --button-border: var(--color-base-300);
+  }
+
+  .button--ghost {
+    --button-bg: transparent;
+    --button-bg-hover: var(--color-base-200);
+    --button-bg-pressed: var(--color-base-300);
+    --button-fg: var(--color-base-content);
+  }
+
+  .button--danger {
+    --button-bg: var(--color-error);
+    --button-bg-hover: color-mix(in oklab, var(--color-error), #000 8%);
+    --button-bg-pressed: color-mix(in oklab, var(--color-error), #000 12%);
+    --button-fg: var(--color-error-content);
+  }
+
+  .button--danger-soft {
+    --button-bg: color-mix(in oklab, var(--color-error), var(--color-base-100) 86%);
+    --button-bg-hover: color-mix(in oklab, var(--color-error), var(--color-base-100) 80%);
+    --button-bg-pressed: color-mix(in oklab, var(--color-error), var(--color-base-100) 74%);
+    --button-fg: var(--color-error);
+  }
+
+  .button--icon-only {
+    width: 2.5rem;
+    padding-inline: 0;
+  }
+
+  .button--icon-only.button--sm {
+    width: 2.25rem;
+  }
+
+  .button--icon-only.button--lg {
+    width: 2.75rem;
+  }
+
+  .button--full-width {
+    width: 100%;
+  }
+
+  .button__spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 9999px;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    animation: button-spinner 700ms linear infinite;
+    flex-shrink: 0;
+  }
+
+  @keyframes button-spinner {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/dist/components/button-group/ButtonGroup.css

@@ -1,117 +1,117 @@
-@layer components {
-  .button-group {
-    display: inline-flex;
-    height: auto;
-    align-items: center;
-    justify-content: center;
-    gap: 0;
-  }
-
-  .button-group--horizontal {
-    flex-direction: row;
-  }
-
-  .button-group--vertical {
-    flex-direction: column;
-  }
-
-  .button-group .button {
-    border-radius: 0;
-  }
-
-  .button-group--horizontal .button:first-child {
-    border-start-start-radius: 1.5rem;
-    border-end-start-radius: 1.5rem;
-  }
-
-  .button-group--horizontal .button:last-child {
-    border-start-end-radius: 1.5rem;
-    border-end-end-radius: 1.5rem;
-  }
-
-  .button-group--horizontal .button:first-child:last-child {
-    border-radius: 1.5rem;
-  }
-
-  .button-group--vertical .button:first-child {
-    border-top-left-radius: 1.5rem;
-    border-top-right-radius: 1.5rem;
-  }
-
-  .button-group--vertical .button:last-child {
-    border-bottom-left-radius: 1.5rem;
-    border-bottom-right-radius: 1.5rem;
-  }
-
-  .button-group--vertical .button:first-child:last-child {
-    border-radius: 1.5rem;
-  }
-
-  .button-group .button:active,
-  .button-group .button[data-pressed="true"] {
-    transform: none;
-  }
-
-  .button-group .button:focus-visible,
-  .button-group .button[data-focus-visible="true"] {
-    outline-offset: -1px;
-  }
-
-  .button-group__separator {
-    background-color: currentColor;
-    opacity: 0.15;
-    border-radius: 4px;
-    position: absolute;
-    pointer-events: none;
-    transition: opacity 150ms var(--ease-smooth);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .button-group__separator {
-      transition: none;
-    }
-  }
-
-  .button-group--horizontal .button-group__separator {
-    left: -1px;
-    top: 25%;
-    width: 1px;
-    height: 50%;
-  }
-
-  .button-group--vertical .button-group__separator {
-    left: 25%;
-    top: -1px;
-    width: 50%;
-    height: 1px;
-  }
-
-  .button-group--horizontal .button--outline:first-child {
-    border-inline-end-width: 0;
-  }
-
-  .button-group--horizontal .button--outline:last-child {
-    border-inline-start-width: 0;
-  }
-
-  .button-group--horizontal .button--outline:not(:first-child):not(:last-child) {
-    border-inline-width: 0;
-  }
-
-  .button-group--vertical .button--outline:first-child {
-    border-bottom-width: 0;
-  }
-
-  .button-group--vertical .button--outline:last-child {
-    border-top-width: 0;
-  }
-
-  .button-group--vertical .button--outline:not(:first-child):not(:last-child) {
-    border-top-width: 0;
-    border-bottom-width: 0;
-  }
-
-  .button-group--full-width {
-    width: 100%;
-  }
-}
+@layer components {
+  .button-group {
+    display: inline-flex;
+    height: auto;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+  }
+
+  .button-group--horizontal {
+    flex-direction: row;
+  }
+
+  .button-group--vertical {
+    flex-direction: column;
+  }
+
+  .button-group .button {
+    border-radius: 0;
+  }
+
+  .button-group--horizontal .button:first-child {
+    border-start-start-radius: 1.5rem;
+    border-end-start-radius: 1.5rem;
+  }
+
+  .button-group--horizontal .button:last-child {
+    border-start-end-radius: 1.5rem;
+    border-end-end-radius: 1.5rem;
+  }
+
+  .button-group--horizontal .button:first-child:last-child {
+    border-radius: 1.5rem;
+  }
+
+  .button-group--vertical .button:first-child {
+    border-top-left-radius: 1.5rem;
+    border-top-right-radius: 1.5rem;
+  }
+
+  .button-group--vertical .button:last-child {
+    border-bottom-left-radius: 1.5rem;
+    border-bottom-right-radius: 1.5rem;
+  }
+
+  .button-group--vertical .button:first-child:last-child {
+    border-radius: 1.5rem;
+  }
+
+  .button-group .button:active,
+  .button-group .button[data-pressed="true"] {
+    transform: none;
+  }
+
+  .button-group .button:focus-visible,
+  .button-group .button[data-focus-visible="true"] {
+    outline-offset: -1px;
+  }
+
+  .button-group__separator {
+    background-color: currentColor;
+    opacity: 0.15;
+    border-radius: 4px;
+    position: absolute;
+    pointer-events: none;
+    transition: opacity 150ms var(--ease-smooth);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .button-group__separator {
+      transition: none;
+    }
+  }
+
+  .button-group--horizontal .button-group__separator {
+    left: -1px;
+    top: 25%;
+    width: 1px;
+    height: 50%;
+  }
+
+  .button-group--vertical .button-group__separator {
+    left: 25%;
+    top: -1px;
+    width: 50%;
+    height: 1px;
+  }
+
+  .button-group--horizontal .button--outline:first-child {
+    border-inline-end-width: 0;
+  }
+
+  .button-group--horizontal .button--outline:last-child {
+    border-inline-start-width: 0;
+  }
+
+  .button-group--horizontal .button--outline:not(:first-child):not(:last-child) {
+    border-inline-width: 0;
+  }
+
+  .button-group--vertical .button--outline:first-child {
+    border-bottom-width: 0;
+  }
+
+  .button-group--vertical .button--outline:last-child {
+    border-top-width: 0;
+  }
+
+  .button-group--vertical .button--outline:not(:first-child):not(:last-child) {
+    border-top-width: 0;
+    border-bottom-width: 0;
+  }
+
+  .button-group--full-width {
+    width: 100%;
+  }
+}