jvetrau-ds 0.1.0

package/styles.css

@@ -0,0 +1,1905 @@
+/* AUTO-GENERATED FILE. DO NOT EDIT MANUALLY. */
+
+/* src/components/button-icon/button-icon.css */
+.button-icon {
+  /* color */
+  --button-icon-bg: transparent;
+  --button-icon-color: var(--color-text);
+  --button-icon-bg-disabled: transparent;
+  --button-icon-color-disabled: var(--color-text-disabled);
+
+  background: var(--button-icon-bg);
+  color: var(--button-icon-color);
+
+  /* typography */
+
+  /* size */
+  --button-icon-size: 32px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--button-icon-size);
+  height: var(--button-icon-size);
+  padding: 0;
+
+  /* border */
+  --button-icon-radius: var(--radius-control);
+  --button-icon-focus-width: var(--size-border-width-min);
+  --button-icon-focus-offset: 2px;
+
+  border: 0;
+  border-radius: var(--button-icon-radius);
+
+  /* depth */
+
+  /* motion */
+  --button-icon-transition-duration: var(--motion-duration1);
+  --button-icon-opacity-hover: 0.8;
+  --button-icon-opacity-active: 0.7;
+
+  cursor: pointer;
+  user-select: none;
+  transition: opacity var(--button-icon-transition-duration);
+}
+
+.button-icon__icon {
+  /* size */
+  flex-shrink: 0;
+}
+
+.button-icon:hover {
+  opacity: var(--button-icon-opacity-hover);
+}
+
+.button-icon:focus-visible {
+  outline: var(--button-icon-focus-width) solid currentColor;
+  outline-offset: var(--button-icon-focus-offset);
+}
+
+.button-icon:active {
+  opacity: var(--button-icon-opacity-active);
+}
+
+.button-icon:disabled,
+.button-icon--disabled {
+  background: var(--button-icon-bg-disabled);
+  color: var(--button-icon-color-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+/* src/components/button/button.css */
+.button {
+  /* color */
+  --button-bg: var(--color-primary-2);
+  --button-color: var(--color-text-primary-2);
+  --button-bg-disabled: var(--color-bg-disabled);
+  --button-color-disabled: var(--color-text-disabled, var(--color-text-control));
+
+  background: var(--button-bg);
+  color: var(--button-color);
+
+  /* typography */
+  --button-font-family: var(--font-control-family);
+  --button-font-weight: var(--font-control-weight);
+  --button-font-size: var(--font-control);
+  --button-line-height: var(--font-control-line);
+  --button-letter-spacing: var(--font-control-letter-spacing);
+
+  font-family: var(--button-font-family);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  line-height: var(--button-line-height);
+  letter-spacing: var(--button-letter-spacing);
+
+  /* size */
+  --button-gap: var(--margin-icon);
+  --button-height: var(--size-control-height);
+  --button-padding-x: var(--padding-control-button-horz);
+  --button-padding-icon-only: var(--padding-control-button-icon-horz);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--button-gap);
+  min-height: var(--button-height);
+  padding-inline: var(--button-padding-x);
+
+  /* border */
+  --button-radius: var(--radius-control-button);
+  --button-focus-width: var(--size-border-width-base);
+  --button-focus-offset: var(--size-border-width-base);
+
+  border: 0;
+  border-radius: var(--button-radius);
+
+  /* depth */
+
+  /* motion */
+  --button-opacity-hover: 0.8;
+  --button-opacity-active: 0.6;
+  --button-opacity-disabled: 0.6;
+  --button-transition-duration: 0.2s;
+
+  cursor: pointer;
+  user-select: none;
+  transition: opacity var(--button-transition-duration) ease;
+}
+
+.button__icon {
+  /* color */
+
+  /* typography */
+  line-height: 0;
+
+  /* size */
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.button:hover {
+  opacity: var(--button-opacity-hover);
+}
+
+.button:focus-visible {
+  outline: var(--button-focus-width) solid var(--button-bg);
+  outline-offset: var(--button-focus-offset);
+}
+
+.button:active {
+  opacity: var(--button-opacity-active);
+}
+
+.button:disabled,
+.button--disabled {
+  background: var(--button-bg-disabled);
+  color: var(--button-color-disabled);
+  opacity: var(--button-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.button--primary {
+  --button-bg: var(--color-primary-2);
+  --button-color: var(--color-text-primary-2);
+}
+
+.button--icon-only {
+  padding-inline: var(--button-padding-icon-only);
+}
+
+/* src/components/card/card.css */
+.card {
+  /* color */
+  --card-bg: var(--color-bg-container);
+  --card-color: var(--color-text-container);
+
+  background: var(--card-bg);
+  color: var(--card-color);
+
+  /* typography */
+
+  /* size */
+  --card-width: 100%;
+  --card-padding: var(--padding-container);
+  --card-gap: var(--margin-container-item);
+  --card-title-gap: var(--font-h2-margin);
+  --card-content-min-height: 200px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: var(--card-gap);
+  width: var(--card-width);
+  padding: var(--card-padding);
+
+  /* border */
+  --card-radius: var(--radius-container);
+
+  border-radius: var(--card-radius);
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__header {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-title-gap);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__title {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2);
+  font-weight: var(--font-h2-weight);
+  line-height: var(--font-h2-line);
+  letter-spacing: var(--font-h2-letter-spacing);
+
+  /* size */
+  margin: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__description {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  font-family: var(--font-lead-family);
+  font-size: var(--font-lead);
+  font-weight: var(--font-lead-weight);
+  line-height: var(--font-lead-line);
+  letter-spacing: var(--font-lead-letter-spacing);
+
+  /* size */
+  margin: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__content {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  min-height: var(--card-content-min-height);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.card__actions {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  gap: var(--margin-control);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+/* src/components/checkbox/checkbox.css */
+.checkbox {
+  /* color */
+  --checkbox-label-color: var(--color-text);
+
+  color: var(--checkbox-label-color);
+
+  /* typography */
+  --checkbox-font-family: var(--font-body-family);
+  --checkbox-font-weight: var(--font-body-weight);
+  --checkbox-font-size: var(--font-body);
+  --checkbox-line-height: var(--font-body-line);
+  --checkbox-letter-spacing: var(--font-body-letter-spacing);
+
+  font-family: var(--checkbox-font-family);
+  font-size: var(--checkbox-font-size);
+  font-weight: var(--checkbox-font-weight);
+  line-height: var(--checkbox-line-height);
+  letter-spacing: var(--checkbox-letter-spacing);
+
+  /* size */
+  --checkbox-gap: var(--margin-choice);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--checkbox-gap);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+  --checkbox-opacity-disabled: 0.6;
+}
+
+.checkbox__input {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: var(--size-control-checkbox);
+  height: var(--size-control-checkbox);
+  margin: 0;
+  flex-shrink: 0;
+
+  /* border */
+  --сheckbox-radius: var(--radius-control);
+  --сheckbox-focus-width: var(--size-border-width-base);
+  --сheckbox-focus-offset: var(--size-border-width-base);
+
+  border: var(--сheckbox-border-width) solid var(--сheckbox-border-color);
+  border-radius: var(--сheckbox-radius);
+
+  /* depth */
+
+  /* motion */
+}
+
+.checkbox__label {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.checkbox--disabled {
+  opacity: var(--checkbox-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.checkbox__input:disabled {
+  cursor: not-allowed;
+}
+
+/* src/components/dropdown/dropdown.css */
+.dropdown {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  position: relative;
+  display: inline-flex;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.dropdown__trigger {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.dropdown__menu {
+  /* color */
+  --dropdown-bg: var(--color-control);
+  --dropdown-color: var(--color-text-control);
+
+  background: var(--dropdown-bg);
+  color: var(--dropdown-color);
+
+  /* typography */
+  --dropdown-font-family: var(--font-control-family);
+  --dropdown-font-weight: var(--font-control-weight);
+  --dropdown-font-size: var(--font-control);
+  --dropdown-line-height: var(--font-control-line);
+  --dropdown-letter-spacing: var(--font-control-letter-spacing);
+
+  font-family: var(--dropdown-font-family);
+  font-size: var(--dropdown-font-size);
+  font-weight: var(--dropdown-font-weight);
+  line-height: var(--dropdown-line-height);
+  letter-spacing: var(--dropdown-letter-spacing);
+
+  /* size */
+  --dropdown-min-width: 160px;
+  --dropdown-offset: var(--margin-icon);
+  --dropdown-padding: var(--padding-menu);
+
+  position: absolute;
+  z-index: 10;
+  min-width: var(--dropdown-min-width);
+  padding: var(--dropdown-padding);
+
+  /* border */
+  --dropdown-border-width: var(--size-border-width-base);
+  --dropdown-radius: var(--radius-control);
+  --dropdown-border-color: var(--color-line);
+
+  border: var(--dropdown-border-width) solid var(--dropdown-border-color);
+  border-radius: var(--dropdown-radius);
+
+  /* depth */
+  --dropdown-shadow: var(--depth-popup);
+
+  box-shadow: var(--dropdown-shadow);
+
+  /* motion */
+}
+
+.dropdown--bottom-start .dropdown__menu {
+  top: calc(100% + var(--dropdown-offset));
+  left: 0;
+}
+
+.dropdown--bottom-end .dropdown__menu {
+  top: calc(100% + var(--dropdown-offset));
+  right: 0;
+}
+
+.dropdown--top-start .dropdown__menu {
+  bottom: calc(100% + var(--dropdown-offset));
+  left: 0;
+}
+
+.dropdown--top-end .dropdown__menu {
+  right: 0;
+  bottom: calc(100% + var(--dropdown-offset));
+}
+
+.dropdown__item {
+  /* color */
+  --dropdown-item-bg: transparent;
+  --dropdown-item-color: inherit;
+  --dropdown-item-bg-hover: var(--color-bg);
+  --dropdown-item-bg-selected: var(--color-primary-2);
+  --dropdown-item-color-selected: var(--color-text-primary-2);
+  --dropdown-item-color-disabled: var(--color-text-note);
+
+  background: var(--dropdown-item-bg);
+  color: var(--dropdown-item-color);
+
+  /* typography */
+  font: inherit;
+  text-align: left;
+
+  /* size */
+  --dropdown-item-padding-y: var(--padding-tag);
+  --dropdown-item-padding-x: var(--padding-tab);
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
+
+  /* border */
+  --dropdown-item-radius: 0;
+
+  border: 0;
+  border-radius: 0;
+
+  /* depth */
+
+  /* motion */
+  --dropdown-transition-duration: var(--motion-duration1);
+
+  cursor: pointer;
+  transition: background var(--dropdown-transition-duration);
+}
+
+.dropdown__item:hover {
+  background: var(--dropdown-item-bg-hover);
+}
+
+.dropdown__item--selected {
+  background: var(--dropdown-item-bg-selected);
+  color: var(--dropdown-item-color-selected);
+}
+
+.dropdown__item--disabled,
+.dropdown__item:disabled {
+  color: var(--dropdown-item-color-disabled);
+  cursor: not-allowed;
+}
+
+.dropdown__item--disabled:hover,
+.dropdown__item:disabled:hover {
+  background: transparent;
+}
+
+/* src/components/field/field.css */
+.field {
+  /* color */
+  --field-label-color: var(--color-text);
+  --field-message-color: var(--color-text-note);
+  --field-error-color: var(--color-line-bad);
+
+  color: var(--field-label-color);
+
+  /* typography */
+  --field-label-font-family: var(--font-body-family);
+  --field-label-font-weight: var(--font-body-weight-accent);
+  --field-label-font-size: var(--font-body);
+  --field-label-line-height: var(--font-body-line);
+  --field-label-letter-spacing: var(--font-body-letter-spacing);
+
+  --field-message-font-family: var(--font-note-family);
+  --field-message-font-weight: var(--font-note-weight);
+  --field-message-font-size: var(--font-note);
+  --field-message-line-height: var(--font-note-line);
+  --field-message-letter-spacing: var(--font-note-letter-spacing);
+
+  font-family: var(--field-label-font-family);
+
+  /* size */
+  --field-gap: var(--margin-form-label-vert);
+  --field-message-gap: var(--margin-form-tip);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--field-gap);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+  --field-opacity-disabled: 0.6;
+}
+
+.field__label {
+  /* color */
+  color: var(--field-label-color);
+
+  /* typography */
+  font-family: var(--field-label-font-family);
+  font-size: var(--field-label-font-size);
+  font-weight: var(--field-label-font-weight);
+  line-height: var(--field-label-line-height);
+  letter-spacing: var(--field-label-letter-spacing);
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.field__required {
+  /* color */
+  color: var(--field-error-color);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.field__control {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.field__message {
+  /* color */
+  color: var(--field-message-color);
+
+  /* typography */
+  font-family: var(--field-message-font-family);
+  font-size: var(--field-message-font-size);
+  font-weight: var(--field-message-font-weight);
+  line-height: var(--field-message-line-height);
+  letter-spacing: var(--field-message-letter-spacing);
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.field--disabled {
+  opacity: var(--field-opacity-disabled);
+}
+
+.field--error .field__message,
+.field__message--error {
+  color: var(--field-error-color);
+}
+
+/* src/components/input/input.css */
+.input {
+  /* color */
+  --input-bg: var(--color-control);
+  --input-text: var(--color-text-control);
+  --input-placeholder: var(--color-bg-placeholder);
+  --input-bg-disabled: var(--color-bg-disabled);
+
+  background: var(--input-bg);
+  color: var(--input-text);
+
+  /* typography */
+  --input-font-family: var(--font-control-family);
+  --input-font-weight: var(--font-control-weight);
+  --input-font-size: var(--font-control);
+  --input-line-height: var(--font-control-line);
+  --input-letter-spacing: var(--font-control-letter-spacing);
+
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  font-weight: var(--input-font-weight);
+  line-height: var(--input-line-height);
+  letter-spacing: var(--input-letter-spacing);
+
+  /* size */
+  --input-height: var(--size-control-height);
+  --input-padding-x: var(--padding-control-horz);
+
+  height: var(--input-height);
+  padding-inline: var(--input-padding-x);
+
+  /* border */
+  --input-border-width: var(--size-border-width-base);
+  --input-border-radius: var(--radius-control);
+  --input-border-color: var(--color-line);
+  --input-border-color-hover: var(--color-line);
+  --input-border-color-focus: var(--color-primary-2);
+  --input-border-color-error: var(--color-line-bad);
+  --input-border-color-success: var(--color-line-good);
+
+  border: var(--input-border-width) solid var(--input-border-color);
+  border-radius: var(--input-border-radius);
+  outline: none;
+
+  /* depth */
+
+  /* motion */
+  --input-opacity-disabled: 0.6;
+  --input-transition-duration: 0.2s;
+
+  transition:
+    border-color var(--input-transition-duration) ease,
+    opacity var(--input-transition-duration) ease,
+    background-color var(--input-transition-duration) ease;
+}
+
+.input::placeholder {
+  color: var(--input-placeholder);
+}
+
+.input:hover {
+  border-color: var(--input-border-color-hover);
+}
+
+.input:focus {
+  border-color: var(--input-border-color-focus);
+}
+
+.input:disabled,
+.input--disabled {
+  background: var(--input-bg-disabled);
+  opacity: var(--input-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.input--error {
+  border-color: var(--input-border-color-error);
+}
+
+.input--success {
+  border-color: var(--input-border-color-success);
+}
+
+/* src/components/menu/menu.css */
+.menu {
+  /* color */
+  --component-bg: transparent;
+  --component-text: inherit;
+
+  background: var(--component-bg);
+  color: var(--component-text);
+
+  /* typography */
+  --component-font-family: inherit;
+  --component-font-weight: inherit;
+  --component-font-size: inherit;
+  --component-line-height: inherit;
+  --component-letter-spacing: inherit;
+
+  font-family: var(--component-font-family);
+  font-size: var(--component-font-size);
+  font-weight: var(--component-font-weight);
+  line-height: var(--component-line-height);
+  letter-spacing: var(--component-letter-spacing);
+
+  /* size */
+  --component-width: auto;
+  --component-height: auto;
+  --component-gap: 0;
+  --component-padding-x: 0;
+  --component-padding-y: 0;
+
+  width: var(--component-width);
+  min-height: var(--component-height);
+  gap: var(--component-gap);
+  padding: var(--component-padding-y) var(--component-padding-x);
+
+  /* border */
+  --component-border-width: 0;
+  --component-border-radius: 0;
+  --component-border-color: transparent;
+
+  border: var(--component-border-width) solid var(--component-border-color);
+  border-radius: var(--component-border-radius);
+  outline: none;
+
+  /* depth */
+
+  /* motion */
+  --component-opacity-disabled: 0.6;
+  --component-transition-duration: 0.2s;
+
+  transition:
+    border-color var(--component-transition-duration) ease,
+    opacity var(--component-transition-duration) ease,
+    background-color var(--component-transition-duration) ease,
+    color var(--component-transition-duration) ease;
+}
+
+.menu__part {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.menu:hover {
+}
+
+.menu:focus {
+}
+
+.menu:focus-visible {
+}
+
+.menu:active {
+}
+
+.menu:disabled {
+}
+
+.menu--variant {
+}
+
+.menu--state {
+}
+
+/* src/components/progressbar/progressbar.css */
+.progressbar {
+  /* color */
+  --progressbar-track-bg: color-mix(in srgb, var(--color-primary-2) 30%, transparent);
+  --progressbar-buffered-bg: color-mix(in srgb, var(--color-primary-2) 40%, transparent);
+  --progressbar-value-bg: var(--color-primary-2);
+  --progressbar-label-color: var(--color-text-primary-2);
+
+  color: var(--progressbar-label-color);
+
+  /* typography */
+  --progressbar-font-family: var(--font-control-family);
+  --progressbar-font-weight: var(--font-control-weight);
+  --progressbar-font-size: var(--font-control);
+  --progressbar-line-height: var(--font-control-line);
+  --progressbar-letter-spacing: var(--font-control-letter-spacing);
+
+  font-family: var(--progressbar-font-family);
+  font-size: var(--progressbar-font-size);
+  font-weight: var(--progressbar-font-weight);
+  line-height: var(--progressbar-line-height);
+  letter-spacing: var(--progressbar-letter-spacing);
+
+  /* size */
+  --progressbar-thickness: 45px;
+  --progressbar-label-offset: 8px;
+  --progressbar-level-height: 400px;
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  /* border */
+  --progressbar-radius: var(--radius-control);
+
+  /* depth */
+
+  /* motion */
+  --progressbar-transition-duration: 0.2s;
+}
+
+.progressbar__track {
+  /* color */
+  background: var(--progressbar-track-bg);
+
+  /* typography */
+
+  /* size */
+  position: relative;
+  flex: 1;
+  height: var(--progressbar-thickness);
+  overflow: hidden;
+
+  /* border */
+  border-radius: var(--progressbar-radius);
+
+  /* depth */
+
+  /* motion */
+}
+
+.progressbar__value {
+  /* color */
+  background: var(--progressbar-value-bg);
+
+  /* typography */
+
+  /* size */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--progressbar-value);
+  height: 100%;
+
+  /* border */
+  border-radius: inherit;
+
+  /* depth */
+
+  /* motion */
+  transform-origin: left center;
+  transition: width var(--progressbar-transition-duration) ease;
+}
+
+.progressbar__buffered {
+  /* color */
+  background: var(--progressbar-buffered-bg);
+
+  /* typography */
+
+  /* size */
+  position: absolute;
+  top: 0;
+  left: var(--progressbar-buffered-offset);
+  width: calc(var(--progressbar-buffered) - var(--progressbar-buffered-offset));
+  height: 100%;
+
+  /* border */
+  border-radius: inherit;
+
+  /* depth */
+
+  /* motion */
+  transform-origin: left center;
+  transition:
+    left var(--progressbar-transition-duration) ease,
+    width var(--progressbar-transition-duration) ease;
+}
+
+.progressbar__label {
+  /* color */
+  color: var(--progressbar-label-color);
+
+  /* typography */
+  font: inherit;
+
+  /* size */
+  position: absolute;
+  top: 50%;
+  right: var(--progressbar-label-offset);
+  transform: translateY(-50%);
+  z-index: 1;
+  white-space: nowrap;
+  pointer-events: none;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.progressbar--vertical {
+  /* size */
+  width: var(--progressbar-thickness);
+  height: var(--progressbar-level-height);
+}
+
+.progressbar--vertical .progressbar__track {
+  /* size */
+  width: var(--progressbar-thickness);
+  height: 100%;
+  flex: none;
+}
+
+.progressbar--vertical .progressbar__value {
+  /* size */
+  top: auto;
+  bottom: 0;
+  width: 100%;
+  height: var(--progressbar-value);
+
+  /* motion */
+  transform-origin: center bottom;
+  transition: height var(--progressbar-transition-duration) ease;
+}
+
+.progressbar--level {
+  /* size */
+  --progressbar-thickness: 32px;
+}
+
+.progressbar--interactive {
+  cursor: pointer;
+  touch-action: none;
+}
+
+.progressbar--interactive:focus-visible {
+  outline: 2px solid var(--progressbar-value-bg);
+  outline-offset: 2px;
+}
+
+/* src/components/radio/radio.css */
+.radio {
+  /* color */
+  --radio-label-color: var(--color-text);
+
+  color: var(--radio-label-color);
+
+  /* typography */
+  --radio-font-family: var(--font-body-family);
+  --radio-font-weight: var(--font-body-weight);
+  --radio-font-size: var(--font-body);
+  --radio-line-height: var(--font-body-line);
+  --radio-letter-spacing: var(--font-body-letter-spacing);
+
+  font-family: var(--radio-font-family);
+  font-size: var(--radio-font-size);
+  font-weight: var(--radio-font-weight);
+  line-height: var(--radio-line-height);
+  letter-spacing: var(--radio-letter-spacing);
+
+  /* size */
+  --radio-gap: var(--margin-choice);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--radio-gap);
+
+  /* border */
+  --radio-radius: var(--radius-control-circle);
+  --radio-focus-width: var(--size-border-width-base);
+  --radio-focus-offset: var(--size-border-width-base);
+
+  border: var(--radio-border-width) solid var(--radio-border-color);
+  border-radius: var(--radio-radius);
+
+  /* depth */
+
+  /* motion */
+  --radio-opacity-disabled: 0.6;
+}
+
+.radio__input {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: var(--size-control-checkbox);
+  height: var(--size-control-checkbox);
+  margin: 0;
+  flex-shrink: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.radio__label {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.radio--disabled {
+  opacity: var(--radio-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.radio__input:disabled {
+  cursor: not-allowed;
+}
+
+/* src/components/richedit/richedit.css */
+.richedit {
+  /* color */
+  --component-bg: transparent;
+  --component-text: inherit;
+
+  background: var(--component-bg);
+  color: var(--component-text);
+
+  /* typography */
+  --component-font-family: inherit;
+  --component-font-weight: inherit;
+  --component-font-size: inherit;
+  --component-line-height: inherit;
+  --component-letter-spacing: inherit;
+
+  font-family: var(--component-font-family);
+  font-size: var(--component-font-size);
+  font-weight: var(--component-font-weight);
+  line-height: var(--component-line-height);
+  letter-spacing: var(--component-letter-spacing);
+
+  /* size */
+  --component-width: auto;
+  --component-height: auto;
+  --component-gap: 0;
+  --component-padding-x: 0;
+  --component-padding-y: 0;
+
+  width: var(--component-width);
+  min-height: var(--component-height);
+  gap: var(--component-gap);
+  padding: var(--component-padding-y) var(--component-padding-x);
+
+  /* border */
+  --component-border-width: 0;
+  --component-border-radius: 0;
+  --component-border-color: transparent;
+
+  border: var(--component-border-width) solid var(--component-border-color);
+  border-radius: var(--component-border-radius);
+  outline: none;
+
+  /* depth */
+
+  /* motion */
+  --component-opacity-disabled: 0.6;
+  --component-transition-duration: 0.2s;
+
+  transition:
+    border-color var(--component-transition-duration) ease,
+    opacity var(--component-transition-duration) ease,
+    background-color var(--component-transition-duration) ease,
+    color var(--component-transition-duration) ease;
+}
+
+.richedit__part {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.richedit:hover {
+}
+
+.richedit:focus {
+}
+
+.richedit:focus-visible {
+}
+
+.richedit:active {
+}
+
+.richedit:disabled {
+}
+
+.richedit--variant {
+}
+
+.richedit--state {
+}
+
+/* src/components/search/search.css */
+.search {
+  /* color */
+  --component-bg: transparent;
+  --component-text: inherit;
+
+  background: var(--component-bg);
+  color: var(--component-text);
+
+  /* typography */
+  --component-font-family: inherit;
+  --component-font-weight: inherit;
+  --component-font-size: inherit;
+  --component-line-height: inherit;
+  --component-letter-spacing: inherit;
+
+  font-family: var(--component-font-family);
+  font-size: var(--component-font-size);
+  font-weight: var(--component-font-weight);
+  line-height: var(--component-line-height);
+  letter-spacing: var(--component-letter-spacing);
+
+  /* size */
+  --component-width: auto;
+  --component-height: auto;
+  --component-gap: 0;
+  --component-padding-x: 0;
+  --component-padding-y: 0;
+
+  width: var(--component-width);
+  min-height: var(--component-height);
+  gap: var(--component-gap);
+  padding: var(--component-padding-y) var(--component-padding-x);
+
+  /* border */
+  --component-border-width: 0;
+  --component-border-radius: 0;
+  --component-border-color: transparent;
+
+  border: var(--component-border-width) solid var(--component-border-color);
+  border-radius: var(--component-border-radius);
+  outline: none;
+
+  /* depth */
+
+  /* motion */
+  --component-opacity-disabled: 0.6;
+  --component-transition-duration: 0.2s;
+
+  transition:
+    border-color var(--component-transition-duration) ease,
+    opacity var(--component-transition-duration) ease,
+    background-color var(--component-transition-duration) ease,
+    color var(--component-transition-duration) ease;
+}
+
+.search__part {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.search:hover {
+}
+
+.search:focus {
+}
+
+.search:focus-visible {
+}
+
+.search:active {
+}
+
+.search:disabled {
+}
+
+.search--variant {
+}
+
+.search--state {
+}
+
+/* src/components/select/select.css */
+.select {
+  /* color */
+  --select-bg: var(--color-control);
+  --select-text: var(--color-text-control);
+  --select-arrow-color: var(--color-text-control);
+  --select-bg-disabled: var(--color-bg-disabled);
+
+  background: var(--select-bg);
+  color: var(--select-text);
+
+  /* typography */
+  --select-font-family: var(--font-control-family);
+  --select-font-weight: var(--font-control-weight);
+  --select-font-size: var(--font-control);
+  --select-line-height: var(--font-control-line);
+  --select-letter-spacing: var(--font-control-letter-spacing);
+
+  font-family: var(--select-font-family);
+  font-size: var(--select-font-size);
+  font-weight: var(--select-font-weight);
+  line-height: var(--select-line-height);
+  letter-spacing: var(--select-letter-spacing);
+
+  /* size */
+  --select-height: var(--size-control-height);
+  --select-padding-x: var(--padding-control-horz);
+  --select-arrow-width: 10px;
+  --select-arrow-height: 6px;
+  --select-arrow-offset: var(--padding-control-horz);
+
+  position: relative;
+  display: inline-block;
+  width: 100%;
+
+  /* border */
+  --select-border-width: var(--size-border-width-base);
+  --select-border-radius: var(--radius-control);
+  --select-border-color: var(--color-line);
+  --select-border-color-hover: var(--color-line);
+  --select-border-color-focus: var(--color-primary-2);
+  --select-border-color-error: var(--color-line-bad);
+  --select-border-color-success: var(--color-line-good);
+
+  border: var(--select-border-width) solid var(--select-border-color);
+  border-radius: var(--select-border-radius);
+
+  /* depth */
+
+  /* motion */
+  --select-opacity-disabled: 0.6;
+  --select-transition-duration: 0.2s;
+}
+
+.select__field {
+  /* color */
+  background: var(--select-bg);
+  color: var(--select-text);
+
+  /* typography */
+  font: inherit;
+  letter-spacing: inherit;
+
+  /* size */
+  width: 100%;
+  height: var(--select-height);
+  padding-left: var(--select-padding-x);
+  padding-right: calc(
+    var(--select-arrow-offset) + var(--select-arrow-width) + var(--select-padding-x)
+  );
+
+  /* border */
+  border: var(--select-border-width) solid var(--select-border-color);
+  border-radius: var(--select-border-radius);
+  outline: none;
+
+  /* depth */
+
+  /* motion */
+  transition:
+    border-color var(--select-transition-duration) ease,
+    opacity var(--select-transition-duration) ease,
+    background-color var(--select-transition-duration) ease;
+
+  appearance: none;
+  cursor: pointer;
+}
+
+.select::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: var(--select-arrow-offset);
+  width: var(--select-arrow-width);
+  height: var(--select-arrow-height);
+  transform: translateY(-50%);
+  background-color: var(--select-arrow-color);
+  pointer-events: none;
+
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
+
+.select__field:hover {
+  border-color: var(--select-border-color-hover);
+}
+
+.select__field:focus {
+  border-color: var(--select-border-color-focus);
+}
+
+.select__field:disabled {
+  background: var(--select-bg-disabled);
+  opacity: var(--select-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.select--error {
+  --select-arrow-color: var(--color-line-bad);
+}
+
+.select--success {
+  --select-arrow-color: var(--color-line-good);
+}
+
+.select--error .select__field {
+  border-color: var(--select-border-color-error);
+}
+
+.select--success .select__field {
+  border-color: var(--select-border-color-success);
+}
+
+/* src/components/tabs/tabs.css */
+.tabs {
+  /* color */
+  --component-bg: transparent;
+  --component-text: inherit;
+
+  background: var(--component-bg);
+  color: var(--component-text);
+
+  /* typography */
+  --component-font-family: inherit;
+  --component-font-weight: inherit;
+  --component-font-size: inherit;
+  --component-line-height: inherit;
+  --component-letter-spacing: inherit;
+
+  font-family: var(--component-font-family);
+  font-size: var(--component-font-size);
+  font-weight: var(--component-font-weight);
+  line-height: var(--component-line-height);
+  letter-spacing: var(--component-letter-spacing);
+
+  /* size */
+  --component-width: auto;
+  --component-height: auto;
+  --component-gap: 0;
+  --component-padding-x: 0;
+  --component-padding-y: 0;
+
+  width: var(--component-width);
+  min-height: var(--component-height);
+  gap: var(--component-gap);
+  padding: var(--component-padding-y) var(--component-padding-x);
+
+  display: flex;
+  align-items: center;
+
+  /* border */
+  --component-border-width: 0;
+  --component-border-radius: 0;
+  --component-border-color: transparent;
+
+  border: var(--component-border-width) solid var(--component-border-color);
+  border-radius: var(--component-border-radius);
+  outline: none;
+
+  /* depth */
+
+  /* motion */
+  --component-opacity-disabled: 0.6;
+  --component-transition-duration: 0.2s;
+
+  transition:
+    border-color var(--component-transition-duration) ease,
+    opacity var(--component-transition-duration) ease,
+    background-color var(--component-transition-duration) ease,
+    color var(--component-transition-duration) ease;
+}
+
+.tabs__part {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.tabs:hover {
+}
+
+.tabs:focus {
+}
+
+.tabs:focus-visible {
+}
+
+.tabs:active {
+}
+
+.tabs:disabled {
+}
+
+.tabs--variant {
+}
+
+.tabs--state {
+}
+
+.tabs > a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  padding: 0 12px;
+
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.tabs > a[aria-current='page'] {
+  font-weight: 600;
+}
+
+/* src/components/tag/tag.css */
+.tag {
+  /* color */
+  --tag-bg: var(--color-colorsemigood);
+  --tag-text: var(--color-colortextcontrol);
+
+  background: var(--tag-bg);
+  color: var(--tag-text);
+
+  /* typography */
+  --tag-font-family: var(--typography-fontbodyfamily);
+  --tag-font-weight: var(--typography-fontnoteweight);
+  --tag-font-size: var(--typography-fontnote);
+  --tag-line-height: var(--typography-fontnoteline);
+  --tag-letter-spacing: var(--typography-fontnoteletterspacing);
+
+  font-family: var(--tag-font-family);
+  font-size: var(--tag-font-size);
+  font-weight: var(--tag-font-weight);
+  line-height: var(--tag-line-height);
+  letter-spacing: var(--tag-letter-spacing);
+
+  /* size */
+  --tag-gap: 0;
+  --tag-height: auto;
+  --tag-padding-x: var(--size-paddingtaghorz);
+  --tag-padding-y: var(--size-paddingtagvert);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tag-gap);
+  min-height: var(--tag-height);
+  padding: var(--tag-padding-y) var(--tag-padding-x);
+
+  /* border */
+  --tag-border-width: 0;
+  --tag-border-radius: var(--border-radiuscontrol);
+  --tag-border-color: transparent;
+
+  border: var(--tag-border-width) solid var(--tag-border-color);
+  border-radius: var(--tag-border-radius);
+  outline: none;
+
+  /* depth */
+
+  /* motion */
+  --tag-transition-duration: 0.2s;
+
+  transition:
+    border-color var(--tag-transition-duration) ease,
+    background-color var(--tag-transition-duration) ease,
+    color var(--tag-transition-duration) ease,
+    opacity var(--tag-transition-duration) ease;
+}
+
+.tag__content {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.tag:hover {
+}
+
+.tag:focus {
+}
+
+.tag:focus-visible {
+}
+
+.tag:active {
+}
+
+.tag--context-error {
+  --tag-bg: var(--color-colorbad);
+}
+
+.tag--context-warning {
+  --tag-bg: var(--color-colormed);
+}
+
+/* src/components/textarea/textarea.css */
+.textarea {
+  /* color */
+  --textarea-bg: var(--color-control);
+  --textarea-text: var(--color-text-control);
+  --textarea-placeholder: var(--color-bg-placeholder);
+  --textarea-bg-disabled: var(--color-bg-disabled);
+
+  background: var(--textarea-bg);
+  color: var(--textarea-text);
+
+  /* typography */
+  --textarea-font-family: var(--font-control-family);
+  --textarea-font-weight: var(--font-control-weight);
+  --textarea-font-size: var(--font-control);
+  --textarea-line-height: var(--font-control-line);
+  --textarea-letter-spacing: var(--font-control-letter-spacing);
+
+  font-family: var(--textarea-font-family);
+  font-size: var(--textarea-font-size);
+  font-weight: var(--textarea-font-weight);
+  line-height: var(--textarea-line-height);
+  letter-spacing: var(--textarea-letter-spacing);
+
+  /* size */
+  --textarea-min-height: var(--size-control-textarea-height);
+  --textarea-padding-x: var(--padding-control-horz);
+  --textarea-padding-y: var(--padding-control-horz);
+
+  min-height: var(--textarea-min-height);
+  padding: var(--textarea-padding-y) var(--textarea-padding-x);
+
+  /* border */
+  --textarea-border-width: var(--size-border-width-base);
+  --textarea-border-radius: var(--radius-control);
+  --textarea-border-color: var(--color-line);
+  --textarea-border-color-hover: var(--color-line);
+  --textarea-border-color-focus: var(--color-primary-2);
+  --textarea-border-color-error: var(--color-line-bad);
+  --textarea-border-color-success: var(--color-line-good);
+
+  border: var(--textarea-border-width) solid var(--textarea-border-color);
+  border-radius: var(--textarea-border-radius);
+  outline: none;
+
+  /* depth */
+
+  /* motion */
+  --textarea-opacity-disabled: 0.6;
+  --textarea-transition-duration: 0.2s;
+
+  resize: vertical;
+  transition:
+    border-color var(--textarea-transition-duration) ease,
+    opacity var(--textarea-transition-duration) ease,
+    background-color var(--textarea-transition-duration) ease;
+}
+
+.textarea::placeholder {
+  color: var(--textarea-placeholder);
+}
+
+.textarea:hover {
+  border-color: var(--textarea-border-color-hover);
+}
+
+.textarea:focus {
+  border-color: var(--textarea-border-color-focus);
+}
+
+.textarea:disabled,
+.textarea--disabled {
+  background: var(--textarea-bg-disabled);
+  opacity: var(--textarea-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.textarea--error {
+  border-color: var(--textarea-border-color-error);
+}
+
+.textarea--success {
+  border-color: var(--textarea-border-color-success);
+}
+
+/* src/components/video/video.css */
+.video {
+  /* color */
+  --video-bg: var(--color-bg-placeholder);
+  --video-control-color: var(--color-text);
+
+  background: var(--video-bg);
+  color: var(--video-control-color);
+
+  /* typography */
+  --video-time-font-family: var(--font-control-family);
+  --video-time-font-weight: var(--font-control-weight);
+  --video-time-font-size: var(--font-control);
+  --video-time-line-height: var(--font-control-line);
+  --video-time-letter-spacing: var(--font-control-letter-spacing);
+
+  /* size */
+  --video-width: 100%;
+  --video-aspect-ratio: 16 / 9;
+  --video-padding: var(--padding-container);
+  --video-controls-gap: var(--margin-icon);
+  --video-volume-height: 400px;
+
+  position: relative;
+  width: var(--video-width);
+  aspect-ratio: var(--video-aspect-ratio);
+  padding: var(--video-padding);
+
+  /* border */
+  --video-radius: var(--radius-container);
+
+  border-radius: var(--video-radius);
+  overflow: hidden;
+
+  /* depth */
+
+  /* motion */
+}
+
+.video__surface {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.video__media {
+  /* color */
+  background: var(--video-bg);
+
+  /* typography */
+
+  /* size */
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.video__main-action {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 1;
+  transform: translate(-50%, -50%);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.video__controls {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  position: absolute;
+  right: var(--video-padding);
+  bottom: var(--video-padding);
+  left: var(--video-padding);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--video-controls-gap);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.video__time {
+  /* color */
+  color: var(--video-control-color);
+
+  /* typography */
+  font-family: var(--video-time-font-family);
+  font-size: var(--video-time-font-size);
+  font-weight: var(--video-time-font-weight);
+  line-height: var(--video-time-line-height);
+  letter-spacing: var(--video-time-letter-spacing);
+
+  /* size */
+  flex-shrink: 0;
+  white-space: nowrap;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.video__progress {
+  /* size */
+  flex: 1;
+  min-width: 0;
+}
+
+.video__sound-control {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.video__volume {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + var(--video-controls-gap));
+  z-index: 2;
+  height: var(--video-volume-height);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.video:fullscreen {
+  /* size */
+  width: 100vw;
+  height: 100vh;
+  aspect-ratio: auto;
+
+  /* border */
+  border-radius: 0;
+}
+
+.video:fullscreen .video__media {
+  /* size */
+  object-fit: contain;
+}
+
+/* src/icons/icon.css */
+.icon {
+  display: inline-block;
+  flex-shrink: 0;
+  color: inherit;
+  vertical-align: middle;
+}
+