draft-components 2.10.3 → 3.0.0

package/dist/components/filtered-search/filtered-search.css

@@ -0,0 +1,284 @@
+.dc-filter-token {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  color: var(--dc-filtered-search-token-color);
+  background: var(--dc-filtered-search-token-bg);
+  border-radius: 6px;
+}
+
+.dc-filter-token_highlighted {
+  color: var(--dc-filtered-search-token-color-selected);
+  background: var(--dc-filtered-search-token-bg-selected);
+}
+
+.dc-filter-token__label,
+.dc-filter-token__button {
+  box-sizing: border-box;
+  height: 28px;
+  padding: 0;
+  font-size: 14px;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.dc-filter-token__label {
+  min-width: 0;
+  max-width: 100%;
+  padding: 0 4px 0 8px;
+  overflow: hidden;
+  line-height: 28px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+
+.dc-filter-token__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  border-top-right-radius: inherit;
+  border-bottom-right-radius: inherit;
+
+}
+
+.dc-filter-token__label:focus,
+.dc-filter-token__button:focus {
+  background: var(--dc-filtered-search-token-bg-hover);
+  outline: none;
+}
+
+.dc-filter-token__label:hover,
+.dc-filter-token__button:hover {
+  background: var(--dc-filtered-search-token-bg-hover) !important;
+}
+
+.dc-filter-token__label:focus:not(:focus-visible),
+.dc-filter-token__button:focus:not(:focus-visible) {
+  background: none;
+}
+
+.dc-filter-operator-select {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-column-gap: 8px;
+  align-items: center;
+}
+
+.dc-string-filter-input {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 4px 8px;
+  align-items: center;
+  padding-left: 4px;
+}
+
+.dc-string-filter-input__error {
+  grid-column: 1/3;
+}
+
+.dc-filter-value-list {
+  box-sizing: border-box;
+  max-height: 192px;
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
+  list-style: none;
+  scroll-behavior: smooth;
+  scroll-snap-type: y mandatory;
+}
+
+.dc-filter-value-list > li {
+  display: flex;
+  scroll-snap-align: start;
+  align-items: center;
+  min-height: 32px;
+}
+
+.dc-filter-popover {
+  width: 320px;
+  max-width: 100%;
+  padding: 16px;
+  font: var(--dc-text-sm);
+}
+
+.dc-filter-form {
+  display: block;
+  width: 100%;
+}
+
+.dc-filter-form__operator {
+  margin-bottom: 8px;
+}
+
+.dc-filter-form__value-list {
+  padding-right: 16px;
+  padding-left: 16px;
+  margin-right: -16px;
+  margin-left: -16px;
+}
+
+.dc-filter-form__buttons {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+
+.dc-filtered-search {
+  --dc-filtered-search-font-size: 14px;
+  --dc-filtered-search-height: 36px;
+  --dc-filtered-search-padding-x: 12px;
+  --dc-filtered-search-border-radius: 7px;
+  --dc-filtered-search-text-color: var(--dc-control-primary-text-color);
+  --dc-filtered-search-border-color: var(--dc-control-border-color);
+  --dc-filtered-search-bg: var(--dc-control-bg);
+  --dc-filtered-search-icon-color: var(--dc-control-secondary-text-color);
+  --dc-filtered-search-focus-ring-color: var(--dc-control-primary-color);
+  --dc-filtered-search-option-color: var(--dc-control-primary-text-color);
+  --dc-filtered-search-option-bg: none;
+  --dc-filtered-search-selected-option-color: var(--dc-on-primary-color);
+  --dc-filtered-search-selected-option-bg: var(--dc-primary-color);
+  --dc-filtered-search-listbox-bg: var(--dc-white);
+  --dc-filtered-search-listbox-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);
+  --dc-filtered-search-token-color: var(--dc-primary-text-color);
+  --dc-filtered-search-token-color-selected: var(--dc-on-primary-color);
+  --dc-filtered-search-token-bg: var(--dc-gray-200);
+  --dc-filtered-search-token-bg-hover: rgb(var(--dc-black-rgb) / 10%);
+  --dc-filtered-search-token-bg-selected: var(--dc-primary-color);
+
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  font-family: var(--dc-primary-font);
+  font-size: var(--dc-filtered-search-font-size);
+  font-weight: 400;
+  line-height: 1;
+  color: var(--dc-filtered-search-text-color);
+  color-scheme: light;
+  cursor: text;
+  background: var(--dc-filtered-search-bg);
+  border: 1px solid var(--dc-filtered-search-border-color);
+  border-radius: var(--dc-filtered-search-border-radius);
+}
+
+.dc-filtered-search_has_focus {
+  border-color: var(--dc-filtered-search-focus-ring-color);
+  box-shadow: 0 0 0 1px var(--dc-filtered-search-focus-ring-color);
+}
+
+.dc-filtered-search__icon {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  margin-top: 8px;
+  margin-left: 8px;
+  pointer-events: none;
+}
+
+.dc-filtered-search__clear-button {
+  flex-shrink: 0;
+  margin-top: 1px;
+  margin-right: 1px;
+  white-space: nowrap;
+  border-radius: calc(var(--dc-filtered-search-border-radius) - 1px);
+}
+
+.dc-filtered-search__clear-button:focus::after {
+  border-radius: inherit;
+}
+
+.dc-filtered-search__filters {
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  align-items: center;
+  min-width: 0;
+  padding: 0 4px;
+  pointer-events: none;
+}
+
+.dc-filtered-search__filters > * {
+  margin: 3px 2px;
+  pointer-events: all;
+}
+
+.dc-filtered-search__input {
+  flex-grow: 1;
+  min-width: 0;
+  height: 28px;
+  padding: 0 8px;
+  font: inherit;
+  color: inherit;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+  border-radius: inherit;
+}
+
+.dc-filtered-search__input::-moz-placeholder {
+  color: inherit;
+  opacity: 0.4;
+}
+
+.dc-filtered-search__input::placeholder {
+  color: inherit;
+  opacity: 0.4;
+}
+
+.dc-filtered-search__input:focus {
+  outline: none;
+}
+
+.dc-filtered-search__list-box {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: var(--dc-overlay-z-index);
+  box-sizing: border-box;
+  width: 100%;
+  padding: 4px;
+  margin: 0;
+  font-size: var(--dc-filtered-search-font-size);
+  list-style: none;
+  background: var(--dc-filtered-search-listbox-bg);
+  border-radius: var(--dc-filtered-search-border-radius);
+  box-shadow: var(--dc-filtered-search-listbox-shadow);
+}
+
+.dc-filtered-search__list-box > [role="option"] {
+  box-sizing: border-box;
+  padding: 6px 8px;
+  color: var(--dc-filtered-search-option-color);
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.dc-filtered-search__list-box > [role="option"][aria-selected="true"] {
+  color: var(--dc-filtered-search-selected-option-color);
+  background: var(--dc-filtered-search-selected-option-bg);
+}
+
+.dark .dc-filtered-search,
+.dark.dc-filtered-search {
+  --dc-filtered-search-listbox-bg: var(--dc-gray-800);
+  --dc-filtered-search-listbox-shadow:
+    0 0 0 1px var(--dc-gray-700),
+    var(--dc-shadow-lg);
+  --dc-filtered-search-token-bg: var(--dc-gray-700);
+  --dc-filtered-search-token-bg-hover: rgb(var(--dc-white-rgb) / 10%);
+
+  color-scheme: dark;
+}

package/dist/components/filtered-search/model/string-filter.js

@@ -7,6 +7,10 @@ const OPERATORS = {
     notContain: 'NOT_CONTAIN',
 };
 export class StringFilter extends AbstractFilter {
+    static Type = TYPE;
+    static Operators = OPERATORS;
+    config;
+    state;
     constructor(config, state) {
         super();
         this.config = config;
@@ -37,5 +41,3 @@ export class StringFilter extends AbstractFilter {
         return this.value === '';
     }
 }
-StringFilter.Type = TYPE;
-StringFilter.Operators = OPERATORS;

package/dist/components/filtered-search/model/string-set-filter.js

@@ -5,6 +5,10 @@ const OPERATORS = {
     notIn: 'NOT_IN',
 };
 export class StringSetFilter extends AbstractFilter {
+    static Type = TYPE;
+    static Operators = OPERATORS;
+    config;
+    state;
     constructor(config, state) {
         super();
         this.config = config;
@@ -35,5 +39,3 @@ export class StringSetFilter extends AbstractFilter {
         return this.value.length === 0;
     }
 }
-StringSetFilter.Type = TYPE;
-StringSetFilter.Operators = OPERATORS;

package/dist/components/filtered-search/string-filter-input.css

@@ -0,0 +1,12 @@
+.dc-string-filter-input {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 4px 8px;
+  align-items: center;
+  padding-left: 4px;
+}
+
+.dc-string-filter-input__error {
+  grid-column: 1/3;
+}

package/dist/components/filtered-search/string-filter-item.js

@@ -47,7 +47,9 @@ export function StringFilterItem({ filter, isEditing, onEditStart, onEditCancel,
         }
         onChange(filter);
     };
-    const anchor = (_jsxs(FilterToken, { isHighlighted: isEditing, onClickLabel: startEdit, onClickCloseButton: onClickCloseButton, children: [label, filter.value ? (_jsxs(_Fragment, { children: ["\u00A0", _jsx("span", { children: formatOperator(filter.operator) }), "\u00A0", _jsx("b", { children: filter.value })] })) : null] }));
+    const anchor = (_jsxs(FilterToken, { isHighlighted: isEditing, onClickLabel: startEdit, onClickCloseButton: onClickCloseButton, children: [label, filter.value
+                ? (_jsxs(_Fragment, { children: ["\u00A0", _jsx("span", { children: formatOperator(filter.operator) }), "\u00A0", _jsx("b", { children: filter.value })] }))
+                : null] }));
     return (_jsx(Popover, { className: "dc-filter-popover", anchor: anchor, anchorGap: 2, transitionDurationMs: 0, isOpen: isEditing, onClose: cancelEdit, children: _jsxs("form", { className: "dc-filter-form", onSubmit: onSubmit, children: [_jsx(FilterOperatorSelect, { className: "dc-filter-form__operator", accessibleName: operatorSelectAccessibleName, label: label, values: operators, value: filterOperator, onChange: setFilterOperator, formatValue: formatOperator }), _jsx(StringFilterInput, { placeholder: valueInputPlaceholder, accessibleName: valueInputAccessibleName, error: error, value: filterValue, onChangeValue: setFilterValue }), _jsxs("div", { className: "dc-filter-form__buttons", children: [_jsx(Button, { buttonStyle: "plain", type: "button", onClick: cancelEdit, children: translations.cancelButton }), _jsx(Button, { type: "submit", tint: "blue", disabled: !filterValue, children: translations.applyButton })] })] }) }));
 }
 StringFilterItem.defaultOperatorFormatter = defaultOperatorFormatter;
@@ -56,7 +58,7 @@ function defaultOperatorFormatter(operator) {
         [StringFilter.Operators.equal]: 'is',
         [StringFilter.Operators.notEqual]: 'is not',
         [StringFilter.Operators.contain]: 'contains',
-        [StringFilter.Operators.notContain]: "doesn't contain",
+        [StringFilter.Operators.notContain]: 'doesn\'t contain',
     };
     return messages[operator];
 }

package/dist/components/filtered-search/string-set-filter-item.js

@@ -40,7 +40,9 @@ export function StringSetFilterItem({ filter, isEditing, onEditStart, onEditCanc
         }
         onChange(changedFilter);
     };
-    const anchor = (_jsxs(FilterToken, { isHighlighted: isEditing, onClickLabel: startEdit, onClickCloseButton: onClickCloseButton, children: [label, filter.value.length > 0 ? (_jsxs(_Fragment, { children: ["\u00A0", _jsx("span", { children: formatOperator(filter.operator) }), "\u00A0", _jsx("b", { children: formatValues(filter.value) })] })) : null] }));
+    const anchor = (_jsxs(FilterToken, { isHighlighted: isEditing, onClickLabel: startEdit, onClickCloseButton: onClickCloseButton, children: [label, filter.value.length > 0
+                ? (_jsxs(_Fragment, { children: ["\u00A0", _jsx("span", { children: formatOperator(filter.operator) }), "\u00A0", _jsx("b", { children: formatValues(filter.value) })] }))
+                : null] }));
     return (_jsx(Popover, { className: "dc-filter-popover", anchor: anchor, anchorGap: 2, transitionDurationMs: 0, isOpen: isEditing, onClose: cancelEdit, children: _jsxs("form", { className: "dc-filter-form", onSubmit: onSubmit, children: [_jsx(FilterOperatorSelect, { className: "dc-filter-form__operator", accessibleName: operatorSelectAccessibleName, label: label, values: operators, value: filterOperator, onChange: setFilterOperator, formatValue: formatOperator }), _jsx(FilterValueList, { className: "dc-filter-form__value-list", values: values, checkedValues: filterValue, onChangeCheckedValues: setFilterValue, formatValue: formatValue }), _jsxs("div", { className: "dc-filter-form__buttons", children: [_jsx(Button, { type: "button", buttonStyle: "plain", onClick: cancelEdit, children: translations.cancelButton }), _jsx(Button, { type: "submit", tint: "blue", disabled: filterValue.length < 1, children: translations.applyButton })] })] }) }));
 }
 StringSetFilterItem.defaultValueFormatter = defaultValueFormatter;

package/dist/components/form-field/form-field.css

@@ -0,0 +1,21 @@
+.dc-form-field {
+  display: block;
+  min-width: 0;
+  text-align: left;
+  color-scheme: light;
+}
+
+.dc-form-field__label {
+  margin-bottom: 4px;
+}
+
+.dc-form-field__error,
+.dc-form-field__hint {
+  display: block;
+  margin-top: 4px;
+}
+
+.dark .dc-form-field,
+.dark.dc-form-field {
+  color-scheme: dark;
+}

package/dist/components/form-field/form-field.js

@@ -33,5 +33,7 @@ export function FormField({ required = false, labelFor = '', label, error, hint,
     else {
         inputElement = children;
     }
-    return (_jsxs("div", { ...props, className: classNames('dc-form-field', className), children: [label ? (_jsx(Label, { className: "dc-form-field__label", required: required, htmlFor: inputId, children: label })) : null, _jsx("div", { className: "dc-form-field__input", children: inputElement }), errorElement, hintElement] }));
+    return (_jsxs("div", { ...props, className: classNames('dc-form-field', className), children: [label
+                ? (_jsx(Label, { className: "dc-form-field__label", required: required, htmlFor: inputId, children: label }))
+                : null, _jsx("div", { className: "dc-form-field__input", children: inputElement }), errorElement, hintElement] }));
 }

package/dist/components/label/label.css

@@ -0,0 +1,23 @@
+.dc-label {
+  --dc-label-text-color: var(--dc-primary-text-color);
+  --dc-label-required-mark-color: #dc2626;
+
+  display: inline-block;
+  font: var(--dc-text-sm);
+  font-weight: 500;
+  color: var(--dc-label-text-color);
+  color-scheme: light;
+}
+
+.dc-label_required::after {
+  padding-left: 0.25em;
+  color: var(--dc-label-required-mark-color);
+  content: "*";
+}
+
+.dark .dc-label,
+.dark.dc-label {
+  --dc-label-required-mark-color: #f87171;
+
+  color-scheme: dark;
+}

package/dist/components/menu/menu.css

@@ -0,0 +1,87 @@
+.dc-menu {
+  --dc-menu-item-icon-gap: 8px;
+  --dc-menu-item-color: var(--dc-button-gray-plain-text-color);
+  --dc-menu-item-bg: var(--dc-button-gray-bg-hover);
+  --dc-menu-item-color-destructive: var(--dc-button-red-plain-text-color);
+  --dc-menu-item-bg-destructive: var(--dc-button-red-plain-bg-hover);
+  --dc-menu-separator-color: var(--dc-bg-transparent-2);
+
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  color-scheme: light;
+}
+
+.dc-menu__container {
+  min-width: 160px;
+  padding: 4px;
+}
+
+.dc-menu__separator {
+  box-sizing: border-box;
+  height: 1px;
+  margin: 4px 8px;
+  background: var(--dc-menu-separator-color);
+}
+
+.dc-menu-btn {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  font: var(--dc-text-sm);
+  color: var(--dc-menu-item-color);
+  text-align: left;
+  white-space: nowrap;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+}
+
+.dc-menu-btn:hover {
+  cursor: pointer;
+}
+
+.dc-menu-btn:focus {
+  background: var(--dc-menu-item-bg);
+  outline: none;
+}
+
+.dc-menu-btn:disabled {
+  cursor: default;
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-menu-btn__label {
+  flex-grow: 1;
+}
+
+.dc-menu-btn__label_gap_left {
+  padding-left: var(--dc-menu-item-icon-gap);
+}
+
+.dc-menu-btn__label_gap_right {
+  padding-right: var(--dc-menu-item-icon-gap);
+}
+
+.dc-menu-btn_destructive {
+  color: var(--dc-menu-item-color-destructive);
+}
+
+.dc-menu-btn_destructive:focus {
+  background: var(--dc-menu-item-bg-destructive);
+}
+
+.dark .dc-menu,
+.dark.dc-menu {
+  color-scheme: dark;
+}

package/dist/components/menu/menu.d.ts

@@ -4,13 +4,13 @@ import { PopoverAlignment, PopoverPlacement } from '../popover/index.js';
 import { MenuItemProps } from './menu-item.js';
 import { MenuSeparator } from './menu-separator.js';
 export type MenuButtonRenderFn = (props: {
-    ref: RefCallback<HTMLElement>;
-    id: string;
+    'ref': RefCallback<HTMLElement>;
+    'id': string;
     'aria-haspopup': true;
     'aria-expanded': boolean;
     'aria-controls': string;
-    onClick: MouseEventHandler;
-    onKeyDown: KeyboardEventHandler;
+    'onClick': MouseEventHandler;
+    'onKeyDown': KeyboardEventHandler;
 }, context: {
     isOpen: boolean;
     openMenu: () => void;

package/dist/components/menu/menu.js

@@ -89,10 +89,10 @@ export function Menu({ defaultIsOpen = false, placement = 'bottom', alignment =
         event.stopPropagation();
     };
     const handleButtonKeyDown = (event) => {
-        if (event.key === KeyboardKeys.ArrowUp ||
-            event.key === KeyboardKeys.ArrowDown ||
-            event.key === KeyboardKeys.Enter ||
-            event.key === KeyboardKeys.Space) {
+        if (event.key === KeyboardKeys.ArrowUp
+            || event.key === KeyboardKeys.ArrowDown
+            || event.key === KeyboardKeys.Enter
+            || event.key === KeyboardKeys.Space) {
             openMenu();
             window.setTimeout(event.key === KeyboardKeys.ArrowUp
                 ? focusLastMenuItem

package/dist/components/nav-list/nav-list-item.js

@@ -3,7 +3,7 @@ import { classNames } from '../../lib/react-helpers.js';
 import { Badge } from '../badge/index.js';
 export function NavListItem({ className, icon, badge, children, renderAs, ...props }) {
     className = classNames(className, 'dc-nav-link');
-    children = (_jsxs(_Fragment, { children: [icon != null && _jsxs("div", { className: "dc-nav-link__icon", children: [icon, " "] }), _jsx("div", { className: "dc-nav-link__text", children: children }), badge != null && _jsxs(_Fragment, { children: ["\u00A0", _jsx(Badge, { className: "dc-nav-link__badge", children: badge })] })] }));
+    children = (_jsxs(_Fragment, { children: [icon != null && (_jsxs("div", { className: "dc-nav-link__icon", children: [icon, ' '] })), _jsx("div", { className: "dc-nav-link__text", children: children }), badge != null && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Badge, { className: "dc-nav-link__badge", children: badge })] }))] }));
     let content;
     if (typeof renderAs === 'function') {
         content = renderAs({ className, children });

package/dist/components/nav-list/nav-list.css

@@ -0,0 +1,89 @@
+.dc-nav-list {
+  --dc-nav-list-title-color: var(--dc-secondary-text-color);
+  --dc-nav-link-text-color: var(--dc-primary-text-color);
+  --dc-nav-link-bg: transparent;
+  --dc-nav-link-bg-hover: var(--dc-bg-transparent-2);
+  --dc-nav-link-bg-active: var(--dc-bg-transparent-2);
+  --dc-nav-link-focus-ring-color: var(--dc-focus-ring-color);
+
+  color-scheme: light;
+}
+
+.dc-nav-list__items {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.dc-nav-list__title,
+.dc-nav-link {
+  box-sizing: border-box;
+  padding: 0 12px;
+}
+
+.dc-nav-list__title {
+  font: 500 var(--dc-text-xs);
+  color: var(--dc-nav-list-title-color);
+}
+
+* + .dc-nav-list__title {
+  margin-top: 20px;
+}
+
+* + .dc-nav-list__item {
+  margin-top: 2px;
+}
+
+.dc-nav-link {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  font: var(--dc-text-sm);
+  color: var(--dc-nav-link-text-color);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+.dc-nav-link:hover {
+  background: var(--dc-nav-link-bg-hover);
+}
+
+.dc-nav-link:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--dc-nav-link-focus-ring-color);
+}
+
+.dc-nav-link:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.dc-nav-link.active,
+.dc-nav-link[aria-current="page"],
+.dc-nav-link[aria-current="step"],
+.dc-nav-link[aria-current="true"] {
+  background: var(--dc-nav-link-bg-active);
+}
+
+.dc-nav-link__icon {
+  display: inline-flex;
+  margin-right: 8px;
+}
+
+.dc-nav-link__text {
+  flex-grow: 1;
+  grid-area: text;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dc-nav-link__badge {
+  margin-left: 8px;
+}
+
+.dark .dc-nav-list,
+.dark.dc-nav-list {
+  color-scheme: dark;
+}

package/dist/components/password-input/password-input.css

@@ -0,0 +1,49 @@
+.dc-password-input {
+  --dc-password-input-toggle-color: var(--dc-control-secondary-text-color);
+  --dc-password-input-toggle-color-hover: var(--dc-control-primary-text-color);
+  --dc-password-input-toggle-bg: none;
+  --dc-password-input-toggle-bg-hover: var(--dc-bg-transparent-2);
+
+  padding-right: 0;
+  color-scheme: light;
+}
+
+.dc-password-input > input {
+  padding-right: calc(var(--dc-input-padding-x) / 2);
+}
+
+.dc-password-input__toggle-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--dc-input-height);
+  height: 100%;
+  padding: 0;
+  color: inherit;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: var(--dc-password-input-toggle-bg);
+  border: none;
+  border-radius: calc(var(--dc-input-border-radius) - 1px);
+}
+
+.dc-password-input__toggle-button:not(:disabled):focus,
+.dc-password-input__toggle-button:not(:disabled):hover {
+  color: var(--dc-password-input-toggle-color-hover);
+  cursor: pointer;
+  background: var(--dc-password-input-toggle-bg-hover);
+  outline: none;
+}
+
+.dc-password-input__toggle-button:focus:not(:focus-visible, :hover) {
+  color: var(--dc-password-input-toggle-color);
+  background: var(--dc-password-input-toggle-bg);
+}
+
+.dark .dc-password-input,
+.dark.dc-password-input {
+  color-scheme: dark;
+}