draft-components 2.11.0 → 3.0.0

package/dist/components/popover/popover.css

@@ -0,0 +1,98 @@
+.dc-popover {
+  --dc-popover-text-color: var(--dc-primary-text-color);
+  --dc-popover-transition-duration: 100ms;
+  --dc-popover-bg: white;
+  --dc-popover-shadow:
+    0 0 0 1px rgb(var(--dc-black-rgb) / 7.5%),
+    0 -1px 0 0 rgb(var(--dc-black-rgb) / 5%),
+    var(--dc-shadow-lg);
+
+  top: 0;
+  left: 0;
+  z-index: var(--dc-overlay-z-index);
+  box-sizing: border-box;
+  padding: 1px;
+  color-scheme: light;
+}
+
+.dc-popover-modal {
+  box-sizing: border-box;
+  max-width: 448px;
+  padding: 12px 16px;
+  font: var(--dc-text-sm);
+  color: var(--dc-popover-text-color);
+  background: var(--dc-popover-bg);
+  border-radius: 8px;
+  box-shadow: var(--dc-popover-shadow);
+}
+
+.dc-popover_closed .dc-popover-modal {
+  opacity: 0;
+  transition: var(--dc-popover-transition-duration) ease;
+  transition-property: opacity, transform;
+  transform: scale(0.95);
+}
+
+.dc-popover_opened .dc-popover-modal {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.dc-popover[data-position="top-start"] .dc-popover-modal {
+  transform-origin: bottom left;
+}
+
+.dc-popover[data-position="top-center"] .dc-popover-modal {
+  transform-origin: bottom center;
+}
+
+.dc-popover[data-position="top-right"] .dc-popover-modal {
+  transform-origin: bottom left;
+}
+
+.dc-popover[data-position="right-start"] .dc-popover-modal {
+  transform-origin: left top;
+}
+
+.dc-popover[data-position="right-center"] .dc-popover-modal {
+  transform-origin: left center;
+}
+
+.dc-popover[data-position="right-right"] .dc-popover-modal {
+  transform-origin: left bottom;
+}
+
+.dc-popover[data-position="bottom-start"] .dc-popover-modal {
+  transform-origin: top left;
+}
+
+.dc-popover[data-position="bottom-center"] .dc-popover-modal {
+  transform-origin: top center;
+}
+
+.dc-popover[data-position="bottom-right"] .dc-popover-modal {
+  transform-origin: top left;
+}
+
+.dc-popover[data-position="left-start"] .dc-popover-modal {
+  transform-origin: right top;
+}
+
+.dc-popover[data-position="left-center"] .dc-popover-modal {
+  transform-origin: right center;
+}
+
+.dc-popover[data-position="left-right"] .dc-popover-modal {
+  transform-origin: right bottom;
+}
+
+.dark .dc-popover,
+.dark.dc-popover {
+  --dc-popover-border-color: var(--dc-gray-700);
+  --dc-popover-bg: var(--dc-gray-800);
+  --dc-popover-shadow:
+    0 0 0 1px var(--dc-gray-700),
+    var(--dc-shadow-lg);
+
+  color-scheme: dark;
+}

package/dist/components/popover/popover.js

@@ -42,9 +42,9 @@ export const Popover = forwardRef(function Popover({ shouldTrapFocus = true, sho
         const target = event.target;
         const anchor = anchorRef.current;
         const content = contentRef.current;
-        if (target instanceof Node &&
-            !anchor?.contains(target) &&
-            !content?.contains(target)) {
+        if (target instanceof Node
+            && !anchor?.contains(target)
+            && !content?.contains(target)) {
             closePopover();
         }
     }, { isEnabled: isOpen });

package/dist/components/positioner/calc-position.js

@@ -1,8 +1,8 @@
 export function calcPosition({ placement, alignment, anchorRect, contentRect, viewportWidth, viewportHeight, scrollX, scrollY, anchorGap, viewportGap, }) {
     const maxWidth = viewportWidth - (2 * viewportGap);
     const maxSideWidth = Math.max(anchorRect.left - anchorGap - viewportGap, viewportWidth - anchorRect.right - anchorGap - viewportGap);
-    if ((placement === 'left' || placement === 'right') &&
-        contentRect.width >= maxSideWidth) {
+    if ((placement === 'left' || placement === 'right')
+        && contentRect.width >= maxSideWidth) {
         placement = 'bottom';
     }
     let x;
@@ -102,8 +102,8 @@ export function getYAxisOffset({ placement, anchorGap, scrollY, anchorY, viewpor
     }
     else {
         y = bottom;
-        if (y + contentHeight > scrollY + viewportHeight &&
-            anchorY > anchorBottom) {
+        if (y + contentHeight > scrollY + viewportHeight
+            && anchorY > anchorBottom) {
             y = top;
             placement = placement === 'bottom' ? 'top' : 'left';
         }

package/dist/components/radio/radio.css

@@ -0,0 +1,88 @@
+.dc-radio {
+  --dc-radio-size: 20px;
+  --dc-radio-color-bg: var(--dc-control-bg);
+  --dc-radio-color-bg-checked: var(--dc-control-primary-color);
+  --dc-radio-color-border: var(--dc-control-border-color);
+  --dc-radio-color-border-checked: var(--dc-control-primary-color);
+  --dc-radio-color-icon: var(--dc-control-on-primary-color);
+  --dc-radio-color-focus-ring: var(--dc-focus-ring-color);
+
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: var(--dc-radio-size);
+  height: var(--dc-radio-size);
+  text-align: left;
+  color-scheme: light;
+}
+
+.dc-radio__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.dc-radio__check {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  display: inline-block;
+  width: var(--dc-radio-size);
+  height: var(--dc-radio-size);
+  vertical-align: middle;
+  cursor: pointer;
+  background: var(--dc-radio-color-bg);
+  border: 1px solid var(--dc-radio-color-border);
+  border-radius: 50%;
+  transition: opacity 0.2s;
+}
+
+.dc-radio__icon {
+  display: none;
+  width: 100%;
+  height: 100%;
+  color: var(--dc-radio-color-icon);
+}
+
+.dc-radio__input:checked + .dc-radio__check {
+  background: var(--dc-radio-color-bg-checked);
+  border-color: var(--dc-radio-color-border-checked);
+}
+
+.dc-radio__input:checked + .dc-radio__check .dc-radio__icon {
+  display: initial;
+}
+
+.dc-radio__input:disabled + .dc-radio__check {
+  cursor: default;
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-radio__input:focus {
+  outline: none;
+}
+
+.dc-radio__input:focus + .dc-radio__check::after {
+  position: absolute;
+  inset: -3px;
+  pointer-events: none;
+  content: "";
+  border-radius: 50%;
+  box-shadow: 0 0 0 3px var(--dc-radio-color-focus-ring);
+}
+
+.dc-radio__input:focus:not(:focus-visible) + .dc-radio__check::after {
+  content: none;
+}
+
+.dark .dc-radio,
+.dark.dc-radio {
+  color-scheme: dark;
+}

package/dist/components/segmented-control/segmented-control.css

@@ -0,0 +1,113 @@
+.dc-segmented {
+  --dc-segmented-border-color: var(--dc-control-border-color);
+  --dc-segmented-bg: var(--dc-bg-transparent-1);
+  --dc-segmented-delimiter-color: var(--dc-border-color-transparent-3);
+  --dc-segmented-button-height: 36px;
+  --dc-segmented-button-padding-x: 16px;
+  --dc-segmented-button-radius: 9px;
+  --dc-segmented-button-text-color: var(--dc-primary-text-color);
+  --dc-segmented-button-border-color: transparent;
+  --dc-segmented-button-border-color-focus: var(--dc-blue-600);
+  --dc-segmented-button-border-color-selected: var(--dc-gray-500);
+  --dc-segmented-button-bg: none;
+  --dc-segmented-button-bg-selected: var(--dc-white);
+  --dc-segmented-button-focus-ring-color: var(--dc-focus-ring-color);
+
+  display: inline-flex;
+  flex-shrink: 0;
+  padding: 0;
+  margin: 0;
+  font: 14px/1 var(--dc-primary-font);
+  list-style: none;
+  color-scheme: light;
+  background: var(--dc-segmented-bg);
+  border-radius: var(--dc-segmented-button-radius);
+  box-shadow: inset 0 0 0 1px var(--dc-segmented-border-color);
+}
+
+.dc-segmented_disabled {
+  pointer-events: none;
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-segmented_size_sm {
+  --dc-segmented-button-height: 32px;
+  --dc-segmented-button-padding-x: 12px;
+  --dc-segmented-button-radius: 8px;
+
+  font-size: 13px;
+}
+
+.dc-segmented_size_lg {
+  --dc-segmented-button-height: 40px;
+  --dc-segmented-button-padding-x: 18px;
+  --dc-segmented-button-radius: 10px;
+
+  font-size: 15px;
+}
+
+.dc-segmented__item + .dc-segmented__item::before {
+  display: inline-block;
+  float: left;
+  width: 1px;
+  height: calc(var(--dc-segmented-button-height) - var(--dc-segmented-button-radius) * 2);
+  content: "";
+  background: var(--dc-segmented-delimiter-color);
+  transform: translateY(var(--dc-segmented-button-radius));
+}
+
+.dc-segmented__item_selected::before,
+.dc-segmented__item_selected + .dc-segmented__item::before {
+  visibility: hidden;
+}
+
+.dc-segmented-button {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex: auto;
+  gap: calc(var(--dc-segmented-button-padding-x) / 2);
+  align-items: center;
+  justify-content: center;
+  height: var(--dc-segmented-button-height);
+  padding: 0 var(--dc-segmented-button-padding-x);
+  font: inherit;
+  color: var(--dc-segmented-button-text-color);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  background: var(--dc-segmented-button-bg);
+  border: 1px solid var(--dc-segmented-button-border-color);
+  border-radius: var(--dc-segmented-button-radius);
+}
+
+.dc-segmented-button[aria-current="true"] {
+  --dc-segmented-button-border-color: var(--dc-segmented-button-border-color-selected);
+  --dc-segmented-button-bg: var(--dc-segmented-button-bg-selected);
+
+  cursor: default;
+}
+
+.dc-segmented-button:focus {
+  border-color: var(--dc-segmented-button-border-color-focus);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--dc-segmented-button-focus-ring-color);
+}
+
+.dc-segmented-button:focus:not(:focus-visible) {
+  border-color: var(--dc-segmented-button-border-color);
+  box-shadow: none;
+}
+
+.dark .dc-segmented,
+.dark.dc-segmented {
+  --dc-segmented-btn-bg-checked: var(--dc-gray-600);
+  --dc-segmented-btn-border-color-focus: var(--dc-blue-400);
+  --dc-segmented-btn-border-color-checked: var(--dc-gray-400);
+
+  color-scheme: dark;
+}

package/dist/components/select/select.css

@@ -0,0 +1,121 @@
+.dc-select {
+  --dc-select-font-size: 14px;
+  --dc-select-text-color: var(--dc-control-primary-text-color);
+  --dc-select-height: 36px;
+  --dc-select-padding-x: 12px;
+  --dc-select-radius: 7px;
+  --dc-select-border-color: var(--dc-control-border-color);
+  --dc-select-border-color-error: var(--dc-control-error-color);
+  --dc-select-bg: var(--dc-control-bg);
+  --dc-select-focus-ring-color: var(--dc-control-primary-color);
+
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: stretch;
+  max-width: 100%;
+  height: var(--dc-select-height);
+  font-family: var(--dc-primary-font);
+  font-size: var(--dc-select-font-size);
+  font-weight: 400;
+  line-height: 1.25;
+  color: var(--dc-select-text-color);
+  vertical-align: middle;
+  color-scheme: light;
+  background: var(--dc-select-bg);
+  border: 1px solid var(--dc-select-border-color);
+  border-radius: var(--dc-select-radius);
+}
+
+.dc-select:focus-within {
+  border-color: var(--dc-select-focus-ring-color);
+  box-shadow: 0 0 0 1px var(--dc-select-focus-ring-color);
+}
+
+.dc-select_multiple {
+  height: initial;
+  overflow: hidden;
+}
+
+.dc-select_disabled {
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-select_invalid {
+  border-color: var(--dc-select-border-color-error);
+}
+
+.dc-select_full-width {
+  display: flex;
+  width: 100%;
+}
+
+.dc-select_sm {
+  --dc-select-font-size: 13px;
+  --dc-select-height: 32px;
+  --dc-select-padding-x: 8px;
+  --dc-select-radius: 6px;
+}
+
+.dc-select_lg {
+  --dc-select-font-size: 15px;
+  --dc-select-height: 40px;
+  --dc-select-padding-x: 16px;
+  --dc-select-radius: 8px;
+}
+
+.dc-select__native {
+  width: 100%;
+  padding-right: calc(var(--dc-select-height) + 0.5em);
+  padding-left: var(--dc-select-padding-x);
+  font: inherit;
+  color: inherit;
+  text-transform: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.dc-select__native:focus {
+  outline: none;
+}
+
+.dc-select__native:disabled {
+  cursor: default;
+  opacity: 1;
+}
+
+.dc-select__native:disabled > option {
+  color: inherit;
+}
+
+.dc-select_multiple .dc-select__native {
+  padding: 0;
+  margin-top: var(--dc-select-radius);
+  margin-bottom: var(--dc-select-radius);
+}
+
+.dc-select__slot-left {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dc-select-height);
+  height: var(--dc-select-height);
+  pointer-events: none;
+  background: none;
+}
+
+.dc-select_multiple .dc-select__slot-left {
+  display: none;
+}
+
+.dark .dc-select,
+.dark.dc-select {
+  color-scheme: dark;
+}

package/dist/components/selection-control/selection-control.css

@@ -0,0 +1,36 @@
+.dc-selection-control {
+  display: grid;
+  grid-template-areas: "input label";
+  grid-template-columns: auto 1fr;
+  grid-gap: 2px 12px;
+  justify-items: start;
+  color-scheme: light;
+}
+
+.dc-selection-control__with_caption {
+  grid-template-areas:
+    "input label"
+    ".     caption";
+}
+
+.dc-selection-control__input {
+  display: inline-flex;
+  grid-area: input;
+}
+
+.dc-selection-control__label {
+  grid-area: label;
+  align-self: center;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.dc-selection-control__caption {
+  grid-area: caption;
+}
+
+.dark .dc-selection-control,
+.dark.dc-selection-control {
+  color-scheme: dark;
+}

package/dist/components/selection-control/selection-control.js

@@ -11,5 +11,7 @@ export function SelectionControl({ label, labelFor, caption, className, children
             'dc-selection-control__with_caption': caption,
         }), children: [_jsx("div", { className: "dc-selection-control__input", children: typeof children === 'function'
                     ? children({ id: controlId })
-                    : cloneElement(children, { id: children.props.id || controlId }) }), _jsx(Label, { className: "dc-selection-control__label", htmlFor: controlId, children: label }), caption ? (_jsx(Caption, { className: "dc-selection-control__caption", children: caption })) : null] }));
+                    : cloneElement(children, { id: children.props.id || controlId }) }), _jsx(Label, { className: "dc-selection-control__label", htmlFor: controlId, children: label }), caption
+                ? (_jsx(Caption, { className: "dc-selection-control__caption", children: caption }))
+                : null] }));
 }

package/dist/components/slide-over/slide-over-body.css

@@ -0,0 +1,7 @@
+.dc-slide-over-body {
+  box-sizing: border-box;
+  flex-grow: 1;
+  padding: 0 16px;
+  overflow: auto;
+  color: var(--dc-slide-over-text-color);
+}

package/dist/components/slide-over/slide-over-header.css

@@ -0,0 +1,29 @@
+.dc-slide-over-header {
+  box-sizing: border-box;
+  padding: 16px;
+  color: var(--dc-slide-over-text-color);
+}
+
+.dc-slide-over-header__title {
+  display: flex;
+  align-items: center;
+}
+
+.dc-slide-over-header__title > h2 {
+  flex-grow: 1;
+  margin: 0;
+  font: 700 var(--dc-text-md);
+  color: inherit;
+}
+
+.dc-slide-over-header__description {
+  margin-top: 4px;
+  font: var(--dc-text-sm);
+  color: var(--dc-slide-over-secondary-text-color);
+}
+
+.dc-slide-over-header__content {
+  margin-top: 8px;
+  font: var(--dc-text-md);
+  color: var(--dc-slide-over-text-color);
+}

package/dist/components/slide-over/slide-over-header.js

@@ -9,5 +9,9 @@ export function SlideOverHeader({ className, htmlTitle, title, children, descrip
         closePanel('close-button');
         onClickCloseButton?.(ev);
     };
-    return (_jsxs("div", { className: classNames('dc-slide-over-header', className), title: htmlTitle, ...props, children: [_jsxs("div", { className: "dc-slide-over-header__title", children: [_jsx("h2", { id: titleId, children: title }), _jsx(IconButton, { buttonStyle: "tinted", size: "xs", "aria-label": closeButtonAccessibleName, onClick: onCloseButtonClicked, children: _jsx(XMarkIcon, { width: 20, height: 20 }) })] }), description ? (_jsx("div", { id: descriptionId, className: "dc-slide-over-header__description", children: description })) : null, children ? (_jsx("div", { className: "dc-slide-over-header__content", children: children })) : null] }));
+    return (_jsxs("div", { className: classNames('dc-slide-over-header', className), title: htmlTitle, ...props, children: [_jsxs("div", { className: "dc-slide-over-header__title", children: [_jsx("h2", { id: titleId, children: title }), _jsx(IconButton, { buttonStyle: "tinted", size: "xs", "aria-label": closeButtonAccessibleName, onClick: onCloseButtonClicked, children: _jsx(XMarkIcon, { width: 20, height: 20 }) })] }), description
+                ? (_jsx("div", { id: descriptionId, className: "dc-slide-over-header__description", children: description }))
+                : null, children
+                ? (_jsx("div", { className: "dc-slide-over-header__content", children: children }))
+                : null] }));
 }

package/dist/components/slide-over/slide-over.css

@@ -0,0 +1,85 @@
+.dc-slide-over-header {
+  box-sizing: border-box;
+  padding: 16px;
+  color: var(--dc-slide-over-text-color);
+}
+
+.dc-slide-over-header__title {
+  display: flex;
+  align-items: center;
+}
+
+.dc-slide-over-header__title > h2 {
+  flex-grow: 1;
+  margin: 0;
+  font: 700 var(--dc-text-md);
+  color: inherit;
+}
+
+.dc-slide-over-header__description {
+  margin-top: 4px;
+  font: var(--dc-text-sm);
+  color: var(--dc-slide-over-secondary-text-color);
+}
+
+.dc-slide-over-header__content {
+  margin-top: 8px;
+  font: var(--dc-text-md);
+  color: var(--dc-slide-over-text-color);
+}
+
+.dc-slide-over-body {
+  box-sizing: border-box;
+  flex-grow: 1;
+  padding: 0 16px;
+  overflow: auto;
+  color: var(--dc-slide-over-text-color);
+}
+
+.dc-slide-over {
+  --dc-slide-over-text-color: var(--dc-primary-text-color);
+  --dc-slide-over-secondary-text-color: var(--dc-secondary-text-color);
+  --dc-slide-over-panel-max-width: 512px;
+  --dc-slide-over-panel-bg: var(--dc-primary-bg);
+  --dc-slide-over-backdrop-color: rgb(var(--dc-gray-900-rgb) / 40%);
+
+  position: relative;
+  z-index: var(--dc-overlay-z-index);
+  color-scheme: light;
+}
+
+.dc-slide-over__backdrop,
+.dc-slide-over__panel {
+  position: fixed;
+  top: 0;
+  height: 100%;
+}
+
+.dc-slide-over__backdrop {
+  left: 0;
+  width: 100%;
+  background: var(--dc-slide-over-backdrop-color);
+}
+
+.dc-slide-over__panel {
+  right: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: var(--dc-slide-over-panel-max-width);
+  color: var(--dc-primary-text-color);
+  background: var(--dc-slide-over-panel-bg);
+  box-shadow: var(--dc-shadow-md);
+}
+
+.dark .dc-slide-over,
+.dark.dc-slide-over {
+  --dc-slide-over-panel-bg: var(--dc-gray-800);
+
+  color-scheme: dark;
+}
+
+.dark .dc-slide-over__panel {
+  box-shadow: 0 0 0 1px var(--dc-border-color-transparent-1), var(--dc-shadow-md);
+}

package/dist/components/slider/get-offset-relative-to-thumb.js

@@ -1,8 +1,8 @@
 import { formatNumber, formatPercent } from '../../lib/index.js';
 export function getOffsetRelativeToThumb(position) {
-    return 'calc(' +
-        `${formatPercent(position)} - ` +
-        `var(--dc-slider-thumb-width) * ${formatNumber(position / 2)} + ` +
-        `var(--dc-slider-thumb-width) * ${formatNumber((1 - position) / 2)}` +
-        ')';
+    return 'calc('
+        + `${formatPercent(position)} - `
+        + `var(--dc-slider-thumb-width) * ${formatNumber(position / 2)} + `
+        + `var(--dc-slider-thumb-width) * ${formatNumber((1 - position) / 2)}`
+        + ')';
 }