@i-cell/ids-styles 0.0.15-beta.10 → 0.0.15-beta.11

package/dist/components.css

@@ -180,192 +180,6 @@
   color: var(--ids-comp-accordion-summary-filled-color-fg-label-disabled);
 }
 
-.ids-action-item {
-  width: 100%;
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-}
-.ids-action-item .ids-action-item-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-style: normal;
-}
-.ids-action-item:not(:disabled) {
-  cursor: pointer;
-}
-.ids-action-item:disabled {
-  cursor: not-allowed;
-}
-.ids-action-item *[icon-leading],
-.ids-action-item *[icon-trailing] {
-  gap: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.ids-action-item.ids-action-item-compact {
-  gap: var(--ids-comp-action-item-size-gap-compact);
-  border-radius: var(--ids-comp-action-item-size-border-radius-compact);
-  padding: var(--ids-comp-action-item-size-padding-y-compact) var(--ids-comp-action-item-size-padding-x-compact);
-  height: var(--ids-comp-action-item-size-height-compact);
-  font-family: var(--ids-comp-action-item-label-typography-font-family-compact);
-  font-size: var(--ids-comp-action-item-label-typography-font-size-compact);
-  font-weight: var(--ids-comp-action-item-label-typography-font-weight-compact);
-  letter-spacing: var(--ids-comp-action-item-label-typography-letter-spacing-compact);
-  line-height: var(--ids-comp-action-item-label-typography-line-height-compact);
-}
-.ids-action-item.ids-action-item-compact *[icon-leading],
-.ids-action-item.ids-action-item-compact *[icon-trailing] {
-  width: var(--ids-comp-action-item-size-icon-compact);
-  height: var(--ids-comp-action-item-size-icon-compact);
-}
-.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface {
-  border-style: solid;
-  border-width: var(--ids-comp-action-item-size-border-width-compact);
-  border-color: var(--ids-comp-action-item-text-color-border-surface-default);
-}
-.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:hover {
-  border-color: var(--ids-comp-action-item-text-color-border-surface-hovered);
-}
-.ids-action-item.ids-action-item-compact.ids-action-item-text.ids-action-item-surface:disabled {
-  border-color: var(--ids-comp-action-item-text-color-border-surface-disabled);
-}
-.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface {
-  border-style: solid;
-  border-width: var(--ids-comp-action-item-size-border-width-compact);
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-default);
-}
-.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:hover {
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-hovered);
-}
-.ids-action-item.ids-action-item-compact.ids-action-item-filled.ids-action-item-surface:disabled {
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-disabled);
-}
-.ids-action-item.ids-action-item-comfortable {
-  gap: var(--ids-comp-action-item-size-gap-comfortable);
-  border-radius: var(--ids-comp-action-item-size-border-radius-comfortable);
-  padding: var(--ids-comp-action-item-size-padding-y-comfortable) var(--ids-comp-action-item-size-padding-x-comfortable);
-  height: var(--ids-comp-action-item-size-height-comfortable);
-  font-family: var(--ids-comp-action-item-label-typography-font-family-comfortable);
-  font-size: var(--ids-comp-action-item-label-typography-font-size-comfortable);
-  font-weight: var(--ids-comp-action-item-label-typography-font-weight-comfortable);
-  letter-spacing: var(--ids-comp-action-item-label-typography-letter-spacing-comfortable);
-  line-height: var(--ids-comp-action-item-label-typography-line-height-comfortable);
-}
-.ids-action-item.ids-action-item-comfortable *[icon-leading],
-.ids-action-item.ids-action-item-comfortable *[icon-trailing] {
-  width: var(--ids-comp-action-item-size-icon-comfortable);
-  height: var(--ids-comp-action-item-size-icon-comfortable);
-}
-.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface {
-  border-style: solid;
-  border-width: var(--ids-comp-action-item-size-border-width-comfortable);
-  border-color: var(--ids-comp-action-item-text-color-border-surface-default);
-}
-.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:hover {
-  border-color: var(--ids-comp-action-item-text-color-border-surface-hovered);
-}
-.ids-action-item.ids-action-item-comfortable.ids-action-item-text.ids-action-item-surface:disabled {
-  border-color: var(--ids-comp-action-item-text-color-border-surface-disabled);
-}
-.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface {
-  border-style: solid;
-  border-width: var(--ids-comp-action-item-size-border-width-comfortable);
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-default);
-}
-.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:hover {
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-hovered);
-}
-.ids-action-item.ids-action-item-comfortable.ids-action-item-filled.ids-action-item-surface:disabled {
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-disabled);
-}
-.ids-action-item.ids-action-item-spacious {
-  gap: var(--ids-comp-action-item-size-gap-spacious);
-  border-radius: var(--ids-comp-action-item-size-border-radius-spacious);
-  padding: var(--ids-comp-action-item-size-padding-y-spacious) var(--ids-comp-action-item-size-padding-x-spacious);
-  height: var(--ids-comp-action-item-size-height-spacious);
-  font-family: var(--ids-comp-action-item-label-typography-font-family-spacious);
-  font-size: var(--ids-comp-action-item-label-typography-font-size-spacious);
-  font-weight: var(--ids-comp-action-item-label-typography-font-weight-spacious);
-  letter-spacing: var(--ids-comp-action-item-label-typography-letter-spacing-spacious);
-  line-height: var(--ids-comp-action-item-label-typography-line-height-spacious);
-}
-.ids-action-item.ids-action-item-spacious *[icon-leading],
-.ids-action-item.ids-action-item-spacious *[icon-trailing] {
-  width: var(--ids-comp-action-item-size-icon-spacious);
-  height: var(--ids-comp-action-item-size-icon-spacious);
-}
-.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface {
-  border-style: solid;
-  border-width: var(--ids-comp-action-item-size-border-width-spacious);
-  border-color: var(--ids-comp-action-item-text-color-border-surface-default);
-}
-.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:hover {
-  border-color: var(--ids-comp-action-item-text-color-border-surface-hovered);
-}
-.ids-action-item.ids-action-item-spacious.ids-action-item-text.ids-action-item-surface:disabled {
-  border-color: var(--ids-comp-action-item-text-color-border-surface-disabled);
-}
-.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface {
-  border-style: solid;
-  border-width: var(--ids-comp-action-item-size-border-width-spacious);
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-default);
-}
-.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:hover {
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-hovered);
-}
-.ids-action-item.ids-action-item-spacious.ids-action-item-filled.ids-action-item-surface:disabled {
-  border-color: var(--ids-comp-action-item-filled-color-border-surface-disabled);
-}
-.ids-action-item.ids-action-item-text.ids-action-item-surface {
-  color: var(--ids-comp-action-item-text-color-fg-label-surface-default);
-  background: var(--ids-comp-action-item-text-color-bg-surface-default);
-}
-.ids-action-item.ids-action-item-text.ids-action-item-surface.ids-action-item-active {
-  color: var(--ids-comp-action-item-text-color-fg-label-surface-active);
-  background: var(--ids-comp-action-item-text-color-bg-surface-active);
-}
-.ids-action-item.ids-action-item-text.ids-action-item-surface:hover {
-  color: var(--ids-comp-action-item-text-color-fg-label-surface-hovered);
-  background: var(--ids-comp-action-item-text-color-bg-surface-hovered);
-}
-.ids-action-item.ids-action-item-text.ids-action-item-surface:focus {
-  color: var(--ids-comp-action-item-text-color-fg-label-surface-focused);
-  background: var(--ids-comp-action-item-text-color-bg-surface-focused);
-}
-.ids-action-item.ids-action-item-text.ids-action-item-surface:active {
-  background: var(--ids-comp-action-item-text-color-bg-surface-pressed);
-}
-.ids-action-item.ids-action-item-text.ids-action-item-surface:disabled {
-  color: var(--ids-comp-action-item-text-color-fg-label-surface-disabled);
-  background: var(--ids-comp-action-item-text-color-bg-surface-disabled);
-}
-.ids-action-item.ids-action-item-filled.ids-action-item-surface {
-  color: var(--ids-comp-action-item-filled-color-fg-label-surface-default);
-  background: var(--ids-comp-action-item-filled-color-bg-surface-default);
-}
-.ids-action-item.ids-action-item-filled.ids-action-item-surface.ids-action-item-active {
-  color: var(--ids-comp-action-item-filled-color-fg-label-surface-active);
-  background: var(--ids-comp-action-item-filled-color-bg-surface-active);
-}
-.ids-action-item.ids-action-item-filled.ids-action-item-surface:hover {
-  color: var(--ids-comp-action-item-filled-color-fg-label-surface-hovered);
-  background: var(--ids-comp-action-item-filled-color-bg-surface-hovered);
-}
-.ids-action-item.ids-action-item-filled.ids-action-item-surface:focus {
-  color: var(--ids-comp-action-item-filled-color-fg-label-surface-focused);
-  background: var(--ids-comp-action-item-filled-color-bg-surface-focused);
-}
-.ids-action-item.ids-action-item-filled.ids-action-item-surface:active {
-  background: var(--ids-comp-action-item-filled-color-bg-surface-pressed);
-}
-.ids-action-item.ids-action-item-filled.ids-action-item-surface:disabled {
-  color: var(--ids-comp-action-item-filled-color-fg-label-surface-disabled);
-  background: var(--ids-comp-action-item-filled-color-bg-surface-disabled);
-}
-
 .ids-action-panel {
   display: flex;
   width: 22.25rem;
@@ -3856,36 +3670,44 @@
 }
 .ids-divider.ids-divider-compact.ids-divider-horizontal {
   height: var(--ids-comp-divider-size-height-compact);
+  width: var(--ids-divider-width);
 }
 .ids-divider.ids-divider-compact.ids-divider-vertical {
   width: var(--ids-comp-divider-size-width-compact);
+  height: var(--ids-divider-height);
 }
 .ids-divider.ids-divider-comfortable {
   border-radius: var(--ids-comp-divider-size-border-radius-comfortable);
 }
 .ids-divider.ids-divider-comfortable.ids-divider-horizontal {
   height: var(--ids-comp-divider-size-height-comfortable);
+  width: var(--ids-divider-width);
 }
 .ids-divider.ids-divider-comfortable.ids-divider-vertical {
   width: var(--ids-comp-divider-size-width-comfortable);
+  height: var(--ids-divider-height);
 }
 .ids-divider.ids-divider-spacious {
   border-radius: var(--ids-comp-divider-size-border-radius-spacious);
 }
 .ids-divider.ids-divider-spacious.ids-divider-horizontal {
   height: var(--ids-comp-divider-size-height-spacious);
+  width: var(--ids-divider-width);
 }
 .ids-divider.ids-divider-spacious.ids-divider-vertical {
   width: var(--ids-comp-divider-size-width-spacious);
+  height: var(--ids-divider-height);
 }
 .ids-divider.ids-divider-dense {
   border-radius: var(--ids-comp-divider-size-border-radius-dense);
 }
 .ids-divider.ids-divider-dense.ids-divider-horizontal {
   height: var(--ids-comp-divider-size-height-dense);
+  width: var(--ids-divider-width);
 }
 .ids-divider.ids-divider-dense.ids-divider-vertical {
   width: var(--ids-comp-divider-size-width-dense);
+  height: var(--ids-divider-height);
 }
 .ids-divider.ids-divider-primary {
   background: var(--ids-comp-divider-color-bg-primary-default);
@@ -6022,6 +5844,192 @@
   color: var(--ids-comp-icon-button-standard-color-fg-surface-disabled);
 }
 
+.ids-menu-item {
+  width: 100%;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+.ids-menu-item .ids-menu-item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-style: normal;
+}
+.ids-menu-item:not(:disabled) {
+  cursor: pointer;
+}
+.ids-menu-item:disabled {
+  cursor: not-allowed;
+}
+.ids-menu-item *[icon-leading],
+.ids-menu-item *[icon-trailing] {
+  gap: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ids-menu-item.ids-menu-item-compact {
+  gap: var(--ids-comp-menu-item-size-gap-compact);
+  border-radius: var(--ids-comp-menu-item-size-border-radius-compact);
+  padding: var(--ids-comp-menu-item-size-padding-y-compact) var(--ids-comp-menu-item-size-padding-x-compact);
+  height: var(--ids-comp-menu-item-size-height-compact);
+  font-family: var(--ids-comp-menu-item-label-typography-font-family-compact);
+  font-size: var(--ids-comp-menu-item-label-typography-font-size-compact);
+  font-weight: var(--ids-comp-menu-item-label-typography-font-weight-compact);
+  letter-spacing: var(--ids-comp-menu-item-label-typography-letter-spacing-compact);
+  line-height: var(--ids-comp-menu-item-label-typography-line-height-compact);
+}
+.ids-menu-item.ids-menu-item-compact *[icon-leading],
+.ids-menu-item.ids-menu-item-compact *[icon-trailing] {
+  width: var(--ids-comp-menu-item-size-icon-compact);
+  height: var(--ids-comp-menu-item-size-icon-compact);
+}
+.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface {
+  border-style: solid;
+  border-width: var(--ids-comp-menu-item-size-border-width-compact);
+  border-color: var(--ids-comp-menu-item-text-color-border-surface-default);
+}
+.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:hover {
+  border-color: var(--ids-comp-menu-item-text-color-border-surface-hovered);
+}
+.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:disabled {
+  border-color: var(--ids-comp-menu-item-text-color-border-surface-disabled);
+}
+.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface {
+  border-style: solid;
+  border-width: var(--ids-comp-menu-item-size-border-width-compact);
+  border-color: var(--ids-comp-menu-item-filled-color-border-surface-default);
+}
+.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:hover {
+  border-color: var(--ids-comp-menu-item-filled-color-border-surface-hovered);
+}
+.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:disabled {
+  border-color: var(--ids-comp-menu-item-filled-color-border-surface-disabled);
+}
+.ids-menu-item.ids-menu-item-comfortable {
+  gap: var(--ids-comp-menu-item-size-gap-comfortable);
+  border-radius: var(--ids-comp-menu-item-size-border-radius-comfortable);
+  padding: var(--ids-comp-menu-item-size-padding-y-comfortable) var(--ids-comp-menu-item-size-padding-x-comfortable);
+  height: var(--ids-comp-menu-item-size-height-comfortable);
+  font-family: var(--ids-comp-menu-item-label-typography-font-family-comfortable);
+  font-size: var(--ids-comp-menu-item-label-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-menu-item-label-typography-font-weight-comfortable);
+  letter-spacing: var(--ids-comp-menu-item-label-typography-letter-spacing-comfortable);
+  line-height: var(--ids-comp-menu-item-label-typography-line-height-comfortable);
+}
+.ids-menu-item.ids-menu-item-comfortable *[icon-leading],
+.ids-menu-item.ids-menu-item-comfortable *[icon-trailing] {
+  width: var(--ids-comp-menu-item-size-icon-comfortable);
+  height: var(--ids-comp-menu-item-size-icon-comfortable);
+}
+.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface {
+  border-style: solid;
+  border-width: var(--ids-comp-menu-item-size-border-width-comfortable);
+  border-color: var(--ids-comp-menu-item-text-color-border-surface-default);
+}
+.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:hover {
+  border-color: var(--ids-comp-menu-item-text-color-border-surface-hovered);
+}
+.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:disabled {
+  border-color: var(--ids-comp-menu-item-text-color-border-surface-disabled);
+}
+.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface {
+  border-style: solid;
+  border-width: var(--ids-comp-menu-item-size-border-width-comfortable);
+  border-color: var(--ids-comp-menu-item-filled-color-border-surface-default);
+}
+.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:hover {
+  border-color: var(--ids-comp-menu-item-filled-color-border-surface-hovered);
+}
+.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:disabled {
+  border-color: var(--ids-comp-menu-item-filled-color-border-surface-disabled);
+}
+.ids-menu-item.ids-menu-item-spacious {
+  gap: var(--ids-comp-menu-item-size-gap-spacious);
+  border-radius: var(--ids-comp-menu-item-size-border-radius-spacious);
+  padding: var(--ids-comp-menu-item-size-padding-y-spacious) var(--ids-comp-menu-item-size-padding-x-spacious);
+  height: var(--ids-comp-menu-item-size-height-spacious);
+  font-family: var(--ids-comp-menu-item-label-typography-font-family-spacious);
+  font-size: var(--ids-comp-menu-item-label-typography-font-size-spacious);
+  font-weight: var(--ids-comp-menu-item-label-typography-font-weight-spacious);
+  letter-spacing: var(--ids-comp-menu-item-label-typography-letter-spacing-spacious);
+  line-height: var(--ids-comp-menu-item-label-typography-line-height-spacious);
+}
+.ids-menu-item.ids-menu-item-spacious *[icon-leading],
+.ids-menu-item.ids-menu-item-spacious *[icon-trailing] {
+  width: var(--ids-comp-menu-item-size-icon-spacious);
+  height: var(--ids-comp-menu-item-size-icon-spacious);
+}
+.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface {
+  border-style: solid;
+  border-width: var(--ids-comp-menu-item-size-border-width-spacious);
+  border-color: var(--ids-comp-menu-item-text-color-border-surface-default);
+}
+.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:hover {
+  border-color: var(--ids-comp-menu-item-text-color-border-surface-hovered);
+}
+.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:disabled {
+  border-color: var(--ids-comp-menu-item-text-color-border-surface-disabled);
+}
+.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface {
+  border-style: solid;
+  border-width: var(--ids-comp-menu-item-size-border-width-spacious);
+  border-color: var(--ids-comp-menu-item-filled-color-border-surface-default);
+}
+.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:hover {
+  border-color: var(--ids-comp-menu-item-filled-color-border-surface-hovered);
+}
+.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:disabled {
+  border-color: var(--ids-comp-menu-item-filled-color-border-surface-disabled);
+}
+.ids-menu-item.ids-menu-item-text.ids-menu-item-surface {
+  color: var(--ids-comp-menu-item-text-color-fg-label-surface-default);
+  background: var(--ids-comp-menu-item-text-color-bg-surface-default);
+}
+.ids-menu-item.ids-menu-item-text.ids-menu-item-surface.ids-menu-item-active {
+  color: var(--ids-comp-menu-item-text-color-fg-label-surface-active);
+  background: var(--ids-comp-menu-item-text-color-bg-surface-active);
+}
+.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:hover {
+  color: var(--ids-comp-menu-item-text-color-fg-label-surface-hovered);
+  background: var(--ids-comp-menu-item-text-color-bg-surface-hovered);
+}
+.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus {
+  color: var(--ids-comp-menu-item-text-color-fg-label-surface-focused);
+  background: var(--ids-comp-menu-item-text-color-bg-surface-focused);
+}
+.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active {
+  background: var(--ids-comp-menu-item-text-color-bg-surface-pressed);
+}
+.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:disabled {
+  color: var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);
+  background: var(--ids-comp-menu-item-text-color-bg-surface-disabled);
+}
+.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface {
+  color: var(--ids-comp-menu-item-filled-color-fg-label-surface-default);
+  background: var(--ids-comp-menu-item-filled-color-bg-surface-default);
+}
+.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface.ids-menu-item-active {
+  color: var(--ids-comp-menu-item-filled-color-fg-label-surface-active);
+  background: var(--ids-comp-menu-item-filled-color-bg-surface-active);
+}
+.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:hover {
+  color: var(--ids-comp-menu-item-filled-color-fg-label-surface-hovered);
+  background: var(--ids-comp-menu-item-filled-color-bg-surface-hovered);
+}
+.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus {
+  color: var(--ids-comp-menu-item-filled-color-fg-label-surface-focused);
+  background: var(--ids-comp-menu-item-filled-color-bg-surface-focused);
+}
+.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active {
+  background: var(--ids-comp-menu-item-filled-color-bg-surface-pressed);
+}
+.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:disabled {
+  color: var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);
+  background: var(--ids-comp-menu-item-filled-color-bg-surface-disabled);
+}
+
 .ids-option {
   display: flex;
   align-items: center;