@bioturing/components 0.14.1 → 0.15.0

package/dist/Toast.css

@@ -0,0 +1,622 @@
+@layer components {
+  span.ds-btn-icon {
+    align-items: center;
+    display: flex;
+  }
+}
+
+@layer components {
+  .ds-stack {
+    display: flex;
+  }
+
+  .ds-stack-hug {
+    display: inline-flex;
+  }
+
+  .ds-stack-horizontal {
+    flex-direction: row;
+  }
+
+  .ds-stack-vertical {
+    flex-direction: column;
+  }
+
+  .ds-stack-fill.ds-stack-vertical {
+    height: 100%;
+  }
+
+  .ds-stack-fill.ds-stack-horizontal {
+    width: 100%;
+  }
+
+  .ds-stack-wrap {
+    flex-wrap: wrap;
+  }
+
+  .ds-stack-gap-0 {
+    gap: 0;
+  }
+
+  .ds-stack-gap-1 {
+    gap: 1px;
+  }
+
+  .ds-stack-gap-2 {
+    gap: 2px;
+  }
+
+  .ds-stack-gap-4 {
+    gap: 4px;
+  }
+
+  .ds-stack-gap-8 {
+    gap: 8px;
+  }
+
+  .ds-stack-gap-12 {
+    gap: 12px;
+  }
+
+  .ds-stack-gap-16 {
+    gap: 16px;
+  }
+
+  .ds-stack-gap-24, .ds-stack-gap-32 {
+    gap: 24px;
+  }
+
+  .ds-stack-align-flex-start {
+    align-items: flex-start;
+  }
+
+  .ds-stack-align-flex-end {
+    align-items: flex-end;
+  }
+
+  .ds-stack-align-center {
+    align-items: center;
+  }
+
+  .ds-stack-align-stretch {
+    align-items: stretch;
+  }
+
+  .ds-stack-align-baseline {
+    align-items: baseline;
+  }
+
+  .ds-stack-justify-flex-start {
+    justify-content: flex-start;
+  }
+
+  .ds-stack-justify-flex-end {
+    justify-content: flex-end;
+  }
+
+  .ds-stack-justify-center {
+    justify-content: center;
+  }
+
+  .ds-stack-justify-space-between {
+    justify-content: space-between;
+  }
+
+  .ds-stack-justify-space-around {
+    justify-content: space-around;
+  }
+
+  .ds-stack-justify-space-evenly {
+    justify-content: space-evenly;
+  }
+
+  .ds-stack-child {
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .ds-stack-child-flex-0 {
+    flex: 0;
+  }
+
+  .ds-stack-child-flex-1 {
+    flex: 1;
+  }
+
+  .ds-stack-child-grow {
+    flex-grow: 1;
+  }
+
+  .ds-stack-child-shrink {
+    flex-shrink: 1;
+  }
+}
+
+@layer components {
+  .ds-truncate {
+    white-space: nowrap;
+    flex-grow: 1;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    display: block;
+    overflow: hidden;
+  }
+
+  .ds-truncate-end {
+    text-overflow: ellipsis;
+  }
+
+  .ds-truncate-middle {
+    text-overflow: clip;
+  }
+
+  .ds-truncate-multiline {
+    -webkit-line-clamp: var(--ds-line-clamp, 2);
+    line-clamp: var(--ds-line-clamp, 2);
+    white-space: normal;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+}
+
+@layer components {
+  .ds-icon-button {
+    cursor: pointer;
+    color: var(--ds-color-icon);
+    background-color: #0000;
+    border: none;
+    border-radius: 999px;
+    justify-content: center;
+    align-items: center;
+    transition: all .2s;
+    display: inline-flex;
+  }
+
+  .ds-icon-button:hover {
+    background-color: var(--ds-color-fill-secondary);
+    color: var(--ds-color-icon-hover);
+  }
+
+  .ds-icon-button:active, .ds-icon-button.ds-popover-open {
+    background-color: var(--ds-color-primary-bg);
+    color: var(--ds-color-primary);
+  }
+
+  .ds-icon-button:focus {
+    outline: none;
+  }
+
+  .ds-icon-button:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    color: var(--ds-color-text-disabled);
+  }
+
+  .ds-icon-button.ds-icon-button-medium {
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: .125rem;
+    font-size: 1.25rem;
+  }
+
+  .ds-icon-button.ds-icon-button-small {
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: .125rem;
+    font-size: 1rem;
+  }
+
+  .ds-icon-button.ds-icon-button-negative-margin {
+    margin: -.125rem;
+  }
+}
+
+@layer components {
+  .ds-modal-wrap {
+    max-height: 100vh;
+  }
+
+  .ds-modal-wrap .ds-modal-close-x {
+    width: 100%;
+    display: flex;
+  }
+
+  .ds-modal-wrap .ds-modal {
+    max-height: 100vh;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-bottom: 0;
+    top: 0;
+  }
+
+  :is(.ds-modal-wrap .ds-modal) .ds-modal-content {
+    box-shadow: var(--ds-box-shadow-secondary);
+    background: var(--ds-modal-bg);
+    flex-direction: column;
+    padding: 0;
+    display: flex;
+  }
+
+  :is(.ds-modal-wrap .ds-modal) .ds-modal-body {
+    padding: var(--ds-modal-content-padding);
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  :is(.ds-modal-wrap .ds-modal) .ds-modal-header {
+    padding: calc(var(--ds-modal-padding) * 2 / 3) var(--ds-modal-padding) 0 var(--ds-modal-padding);
+    background: none;
+    margin-bottom: 0;
+  }
+
+  :is(.ds-modal-wrap .ds-modal) .ds-modal-footer {
+    padding: 0 var(--ds-modal-padding) var(--ds-modal-padding) var(--ds-modal-padding);
+    background: none;
+    margin-top: 0;
+  }
+
+  :is(.ds-modal-wrap .ds-modal) .ds-modal-close {
+    top: calc(var(--ds-modal-padding) * 2 / 3 - 4px);
+  }
+
+  .ds-modal-wrap:not(.ds-modal-centered) .ds-modal-inner {
+    margin-top: 4rem;
+  }
+
+  .ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal-content {
+    max-height: calc(100vh - var(--ds-modal-edge-padding) * 2);
+    margin: var(--ds-modal-edge-padding);
+  }
+
+  .ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal > div[tabindex="0"] {
+    max-height: calc(100vh - var(--ds-modal-edge-padding) * 2);
+  }
+
+  .ds-modal-no-body-scroll .ds-modal {
+    max-height: 100%;
+  }
+
+  :is(.ds-modal-no-body-scroll .ds-modal) .ds-modal-body {
+    display: grid;
+    overflow: hidden;
+  }
+
+  :is(:is(.ds-modal-no-body-scroll .ds-modal) .ds-modal-body) > * {
+    min-height: 0;
+  }
+
+  .ds-modal-fullscreen .ds-modal > div[tabindex="0"], .ds-modal-fullscreen .ds-modal .ds-modal-inner {
+    height: 100%;
+  }
+
+  .ds-modal-fullscreen .ds-modal .ds-modal-content {
+    border-radius: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  :is(.ds-modal-fixed .ds-modal) .ds-modal-footer {
+    border-top: 1px solid var(--ds-color-split);
+    padding: calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding);
+    margin-top: 0;
+  }
+
+  :is(.ds-modal-fixed .ds-modal) .ds-modal-header {
+    border-bottom: 1px solid var(--ds-color-split);
+    padding: calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding);
+    margin-bottom: 0;
+  }
+
+  :is(.ds-modal-fixed .ds-modal) .ds-modal-close {
+    top: 8px;
+  }
+
+  :is(.ds-modal-content-overflow .ds-modal) .ds-modal-inner {
+    margin-top: 0;
+  }
+}
+
+@layer components {
+  .ds-toast-viewport {
+    z-index: 2001;
+    justify-content: center;
+    width: 100%;
+    max-width: 30rem;
+    margin: 0 auto;
+    display: flex;
+    position: fixed;
+    top: auto;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .ds-toast {
+    --gap: .5rem;
+    --offset-y: calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1)  + var(--toast-swipe-movement-y));
+    font-family: var(--font-sans);
+    box-sizing: border-box;
+    background: var(--ds-color-bg-elevated);
+    color: var(--ds-color-text);
+    gap: var(--gap);
+    max-width: 100%;
+    box-shadow: var(--ds-box-shadow-secondary);
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: default;
+    z-index: calc(1000 - var(--toast-index));
+    transform: translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y)  + (var(--toast-index) * -20%))) scale(calc(1 - (var(--toast-index) * .1)));
+    background-clip: padding-box;
+    border-radius: .5rem;
+    margin-right: 0;
+    padding: .75rem 1rem;
+    transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .5s;
+    display: inline-flex;
+    position: absolute;
+    bottom: 0;
+  }
+
+  .ds-toast:after {
+    top: 100%;
+  }
+
+  .ds-toast[data-expanded] {
+    transform: translateX(var(--toast-swipe-movement-x)) translateY(var(--offset-y));
+  }
+
+  .ds-toast[data-starting-style], .ds-toast[data-ending-style]:not([data-limited]) {
+    transform: translateY(150%);
+  }
+
+  .ds-toast[data-ending-style] {
+    opacity: 0;
+  }
+
+  .ds-toast[data-ending-style][data-swipe-direction="up"] {
+    transform: translateY(calc(var(--toast-swipe-movement-y)  - 150%));
+  }
+
+  .ds-toast[data-ending-style][data-swipe-direction="left"] {
+    transform: translateX(calc(var(--toast-swipe-movement-x)  - 150%)) translateY(var(--offset-y));
+  }
+
+  .ds-toast[data-ending-style][data-swipe-direction="right"] {
+    transform: translateX(calc(var(--toast-swipe-movement-x)  + 150%)) translateY(var(--offset-y));
+  }
+
+  .ds-toast[data-ending-style][data-swipe-direction="down"] {
+    transform: translateY(calc(var(--toast-swipe-movement-y)  + 150%));
+  }
+
+  .ds-toast:after {
+    content: "";
+    width: 100%;
+    height: calc(var(--gap)  + 1px);
+    position: absolute;
+    left: 0;
+  }
+
+  .ds-toast-content {
+    flex-direction: column;
+    flex: 1;
+    gap: 2px;
+    display: flex;
+  }
+
+  .ds-toast-title {
+    font-size: var(--text-ds-h5);
+    font-weight: var(--text-ds-h5--font-weight);
+    line-height: var(--text-ds-h5--line-height);
+  }
+
+  .ds-toast-description {
+    font-size: var(--ds-font-size);
+    line-height: var(--ds-line-height);
+  }
+
+  .ds-toast-description-traceback p:not(:first-child) {
+    margin-top: .5rem;
+  }
+
+  .ds-toast-icon-wrap {
+    flex: 0;
+    width: 1.25rem;
+    font-size: 1.25rem;
+    display: block;
+  }
+
+  .ds-toast-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    display: block;
+  }
+
+  .ds-toast-icon.ds-toast-icon-info {
+    color: var(--ds-color-primary);
+  }
+
+  .ds-toast-icon.ds-toast-icon-success {
+    color: var(--ds-color-success);
+  }
+
+  .ds-toast-icon.ds-toast-icon-warning {
+    color: var(--ds-color-warning);
+  }
+
+  .ds-toast-icon.ds-toast-icon-error {
+    color: var(--ds-color-error);
+  }
+
+  .ds-toast-icon.ds-toast-icon-progress {
+    color: var(--ds-color-primary);
+    animation: var(--ds-animate-spin);
+  }
+}
+
+:root {
+  --ds-modal-padding: 24px;
+  --ds-modal-edge-padding: 16px;
+  --ds-popup-panel-padding: 16px;
+  --ds-scrollbar-width: auto;
+  --ds-scrollbar-width-legacy: 15;
+  --ds-box-shadow-popover-arrow: 0px 0px 1px 0px var(--ds-color-border-modal), 2px 2px 5px #0000000d;
+  --ds-inter: "Inter", Helvetica, Arial, sans-serif;
+  --ds-roboto-mono: "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+@supports (font-variation-settings: normal) {
+  :root {
+    --ds-inter: "InterVariable", Inter, Helvetica, Arial, sans-serif;
+    --ds-roboto-mono: "Roboto Mono Variable", Roboto Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-optical-sizing: auto;
+  }
+}
+
+@layer components {
+  .ds-theme-provider {
+    --ds-color-bg-segment-active: #fff;
+    --ds-scrollbar-color-thumb: #0003;
+    --ds-scrollbar-color-track: #0000;
+    --ds-color-base-solid: #000;
+    --ds-color-table-fixed-column-shadow: #0000001a;
+    --ds-color-border-modal: #0000003d;
+  }
+
+  .ds-theme-provider.dark {
+    --ds-color-border-modal: #ffffff8c;
+    --ds-color-bg-segment-active: #424248;
+    --ds-scrollbar-color-thumb: #fff3;
+    --ds-scrollbar-color-track: #0000;
+    --ds-color-base-solid: #fff;
+    --ds-color-table-fixed-column-shadow: #0003;
+  }
+}
+
+@layer components {
+  .ds-code-block {
+    background: var(--ds-color-bg-layout);
+    box-shadow: 0 0 0 1px inset var(--ds-color-split);
+    border-radius: var(--ds-border-radius);
+    font-family: var(--font-mono);
+    padding: 1rem;
+    position: relative;
+  }
+
+  .ds-code-block-header {
+    justify-items: start;
+    margin-bottom: .75rem;
+    display: flex;
+  }
+
+  .ds-code-block-copy {
+    opacity: 0;
+    transition: opacity .2s ease-in-out;
+    position: absolute;
+    top: 1rem;
+    right: .75rem;
+  }
+
+  .ds-code-block:hover .ds-code-block-copy {
+    opacity: 100;
+  }
+
+  .ds-code-block-content {
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    padding-right: 1.5rem;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .ds-code-block-content .ds-scoll-area {
+    max-height: 30rem;
+  }
+}
+
+@layer components {
+  .ds-segmented .ds-segmented-item-label {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  .ds-segmented .ds-segmented-item-icon {
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    font-size: 1rem;
+    display: flex;
+  }
+}
+
+@layer components {
+  .ds-scroll-area {
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    min-height: 0;
+    display: flex;
+  }
+
+  .ds-scroll-area .ds-scroll-area-viewport {
+    overscroll-behavior: contain;
+    flex-shrink: 1;
+    height: 100%;
+    max-height: 100%;
+    overflow: hidden;
+  }
+
+  :is(.ds-scroll-area .ds-scroll-area-viewport):focus-visible {
+    outline-offset: 4px;
+    outline-width: 2px;
+    outline-color: var(--ds-color-primary);
+  }
+
+  .ds-scroll-area .ds-scroll-area-scrollbar {
+    opacity: 0;
+    background-color: #0000;
+    justify-content: center;
+    padding: .25rem;
+    transition-property: opacity;
+    transition-delay: .1s;
+    display: flex;
+  }
+
+  :is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb {
+    background-color: var(--ds-color-bg-fill-tertiary);
+    border: 1px solid var(--ds-color-border);
+    border-radius: 9999px;
+  }
+
+  [data-orientation="vertical"]:is(.ds-scroll-area .ds-scroll-area-scrollbar) {
+    width: .875rem;
+  }
+
+  [data-orientation="vertical"]:is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb {
+    width: 100%;
+  }
+
+  [data-orientation="horizontal"]:is(.ds-scroll-area .ds-scroll-area-scrollbar) {
+    flex-direction: column;
+    width: 100%;
+    height: .875rem;
+  }
+
+  [data-orientation="horizontal"]:is(.ds-scroll-area .ds-scroll-area-scrollbar) .ds-scroll-area-thumb {
+    height: 100%;
+  }
+
+  [data-hovering]:is(.ds-scroll-area .ds-scroll-area-scrollbar), [data-scrolling]:is(.ds-scroll-area .ds-scroll-area-scrollbar) {
+    opacity: 1;
+    transition-duration: .2s;
+    transition-delay: 0s;
+  }
+}
+