prime-ui-kit 0.7.3 → 0.7.7

package/dist/components/index.css

@@ -3727,12 +3727,6 @@
   display: block;
 }
 .Select_content2 {
-  --select-item-min-height: var(--prime-sys-size-control-m-height);
-  --select-item-text: var(--prime-sys-typography-control-s);
-  --select-item-pad-x: var(--prime-sys-size-control-m-inputPaddingX);
-  --select-item-icon-size: var(--prime-sys-size-control-m-icon);
-  --select-item-gap: var(--prime-sys-size-control-m-gap);
-  --select-item-radius: var(--prime-sys-size-control-m-radius);
   display: flex;
   flex-direction: column;
   gap: var(--prime-sys-spacing-x1);
@@ -3748,6 +3742,9 @@
   font-family: inherit;
   color: var(--prime-sys-color-content-primary);
 }
+.Select_content2[aria-hidden=true] {
+  pointer-events: none;
+}
 .Select_content2[data-overlay-portal-layer=page] {
   z-index: var(--prime-sys-elevation-zIndex-dropdown);
 }
@@ -3760,7 +3757,33 @@
 .Select_content2[data-overlay-portal-layer=drawerInModal] {
   z-index: var(--prime-sys-elevation-zIndex-dropdownInDrawerInModal);
 }
-.Select_content2[data-size=s] {
+.Select_item2 {
+  --select-item-min-height: var(--prime-sys-size-control-m-height);
+  --select-item-text: var(--prime-sys-typography-control-s);
+  --select-item-pad-x: var(--prime-sys-size-control-m-inputPaddingX);
+  --select-item-icon-size: var(--prime-sys-size-control-m-icon);
+  --select-item-gap: var(--prime-sys-size-control-m-gap);
+  --select-item-radius: var(--prime-sys-size-control-m-radius);
+  display: flex;
+  align-items: center;
+  gap: var(--select-item-gap);
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--select-item-min-height);
+  padding-block: 0;
+  padding-inline: var(--select-item-pad-x);
+  border-radius: var(--select-item-radius);
+  cursor: pointer;
+  font-size: var(--select-item-text);
+  font-weight: var(--prime-sys-typography-weight-medium);
+  line-height: 1.2;
+  color: var(--prime-sys-color-content-primary);
+  text-align: start;
+  transition: background-color var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+  outline: none;
+  user-select: none;
+}
+.Select_item2[data-size=s] {
   --select-item-min-height: var(--prime-sys-size-control-s-height);
   --select-item-text: var(--prime-sys-typography-support-2xs);
   --select-item-pad-x: var(--prime-sys-size-control-s-inputPaddingX);
@@ -3768,7 +3791,7 @@
   --select-item-gap: var(--prime-sys-size-control-s-gap);
   --select-item-radius: var(--prime-sys-size-control-s-radius);
 }
-.Select_content2[data-size=m] {
+.Select_item2[data-size=m] {
   --select-item-min-height: var(--prime-sys-size-control-m-height);
   --select-item-text: var(--prime-sys-typography-control-s);
   --select-item-pad-x: var(--prime-sys-size-control-m-inputPaddingX);
@@ -3776,7 +3799,7 @@
   --select-item-gap: var(--prime-sys-size-control-m-gap);
   --select-item-radius: var(--prime-sys-size-control-m-radius);
 }
-.Select_content2[data-size=l] {
+.Select_item2[data-size=l] {
   --select-item-min-height: var(--prime-sys-size-control-l-height);
   --select-item-text: var(--prime-sys-typography-control-m);
   --select-item-pad-x: var(--prime-sys-size-control-l-inputPaddingX);
@@ -3784,7 +3807,7 @@
   --select-item-gap: var(--prime-sys-size-control-l-gap);
   --select-item-radius: var(--prime-sys-size-control-l-radius);
 }
-.Select_content2[data-size=xl] {
+.Select_item2[data-size=xl] {
   --select-item-min-height: var(--prime-sys-size-control-xl-height);
   --select-item-text: var(--prime-sys-typography-control-l);
   --select-item-pad-x: var(--prime-sys-size-control-xl-inputPaddingX);
@@ -3792,26 +3815,6 @@
   --select-item-gap: var(--prime-sys-size-control-xl-gap);
   --select-item-radius: var(--prime-sys-size-control-xl-radius);
 }
-.Select_item2 {
-  display: flex;
-  align-items: center;
-  gap: var(--select-item-gap);
-  box-sizing: border-box;
-  width: 100%;
-  min-height: var(--select-item-min-height);
-  padding-block: 0;
-  padding-inline: var(--select-item-pad-x);
-  border-radius: var(--select-item-radius);
-  cursor: pointer;
-  font-size: var(--select-item-text);
-  font-weight: var(--prime-sys-typography-weight-medium);
-  line-height: 1.2;
-  color: var(--prime-sys-color-content-primary);
-  text-align: start;
-  transition: background-color var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
-  outline: none;
-  user-select: none;
-}
 .Select_item2:hover,
 .Select_item2[data-highlighted=true] {
   background: color-mix(in srgb, var(--prime-sys-color-action-neutralBackgroundHover) 90%, var(--prime-sys-color-field-text) 10%);
@@ -3871,12 +3874,24 @@
 .Select_groupLabel2 {
   display: flex;
   align-items: center;
-  padding-inline: var(--select-item-pad-x);
+  padding-inline: var(--prime-sys-size-control-m-inputPaddingX);
   padding-block: var(--prime-sys-spacing-x1);
   font-size: var(--prime-sys-typography-support-2xs);
   color: var(--prime-sys-color-content-muted);
   font-weight: var(--prime-sys-typography-weight-medium);
 }
+.Select_groupLabel2[data-size=s] {
+  padding-inline: var(--prime-sys-size-control-s-inputPaddingX);
+}
+.Select_groupLabel2[data-size=m] {
+  padding-inline: var(--prime-sys-size-control-m-inputPaddingX);
+}
+.Select_groupLabel2[data-size=l] {
+  padding-inline: var(--prime-sys-size-control-l-inputPaddingX);
+}
+.Select_groupLabel2[data-size=xl] {
+  padding-inline: var(--prime-sys-size-control-xl-inputPaddingX);
+}
 .Select_separator2 {
   flex-shrink: 0;
   align-self: stretch;
@@ -4206,24 +4221,30 @@
   align-items: center;
 }
 .Modal_title2 {
+  margin: 0;
   line-height: 1.2;
   font-weight: var(--prime-sys-typography-title-weight);
   font-size: var(--prime-sys-size-control-m-text);
 }
 .Modal_description2 {
+  margin: 0;
   color: var(--prime-sys-color-content-secondary);
-  font-size: var(--prime-sys-size-control-m-supportText);
+  font-size: var(--prime-sys-size-control-s-text);
+  line-height: 1.4;
 }
 .Modal_headText2 {
-  display: grid;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
   gap: var(--prime-sys-size-modal-titleGap);
+  min-width: 0;
   padding-right: var(--prime-sys-size-modal-headTextPaddingRight);
 }
 .Modal_headerIcon2 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--prime-sys-color-surface-raised);
+  background: var(--prime-sys-color-surface-default);
   color: var(--prime-sys-color-content-secondary);
   flex: 0 0 auto;
   width: var(--prime-sys-size-modal-headerIconSize);
@@ -8490,6 +8511,277 @@
   flex-shrink: 0;
 }
 
+/* src/components/tag-select/TagSelect.module.css */
+.TagSelect_control2 {
+  --ts-pad-x: var(--prime-sys-size-control-m-inputPaddingX);
+  --ts-pad-y: var(--prime-sys-size-control-m-inputPaddingY);
+  --ts-gap: var(--prime-sys-size-control-m-gap);
+  --ts-chevron: var(--prime-sys-size-control-m-icon);
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--ts-gap);
+  width: 100%;
+  min-width: 0;
+  padding-inline-start: var(--ts-pad-x);
+  padding-inline-end: calc(var(--ts-pad-x) + var(--ts-chevron) + var(--ts-gap));
+  padding-block: var(--ts-pad-y);
+  border-radius: var(--prime-sys-size-control-m-radius);
+  border: var(--prime-sys-border-width-control) solid var(--prime-sys-color-field-border);
+  background: var(--prime-sys-color-field-bg);
+  color: var(--prime-sys-color-field-text);
+  font-size: var(--prime-sys-size-control-m-text);
+  font-family: inherit;
+  box-shadow: var(--prime-sys-elevation-shadow-surface);
+  cursor: text;
+  text-align: left;
+  outline: none;
+  transition:
+    border-color var(--prime-sys-motion-medium) var(--prime-sys-motion-standard),
+    box-shadow var(--prime-sys-motion-medium) var(--prime-sys-motion-standard),
+    background-color var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+}
+.TagSelect_control2[data-size=s] {
+  --ts-pad-x: var(--prime-sys-size-control-s-inputPaddingX);
+  --ts-pad-y: var(--prime-sys-size-control-s-inputPaddingY);
+  --ts-gap: var(--prime-sys-size-control-s-gap);
+  --ts-chevron: var(--prime-sys-size-control-s-icon);
+  border-radius: var(--prime-sys-size-control-s-radius);
+  font-size: var(--prime-sys-size-control-s-text);
+}
+.TagSelect_control2[data-size=m] {
+  --ts-gap: var(--prime-sys-size-control-m-gap);
+  --ts-chevron: var(--prime-sys-size-control-m-icon);
+  border-radius: var(--prime-sys-size-control-m-radius);
+  font-size: var(--prime-sys-size-control-m-text);
+}
+.TagSelect_control2[data-size=l] {
+  --ts-pad-x: var(--prime-sys-size-control-l-inputPaddingX);
+  --ts-pad-y: var(--prime-sys-size-control-l-inputPaddingY);
+  --ts-gap: var(--prime-sys-size-control-l-gap);
+  --ts-chevron: var(--prime-sys-size-control-l-icon);
+  border-radius: var(--prime-sys-size-control-l-radius);
+  font-size: var(--prime-sys-size-control-l-text);
+}
+.TagSelect_control2[data-size=xl] {
+  --ts-pad-x: var(--prime-sys-size-control-xl-inputPaddingX);
+  --ts-pad-y: var(--prime-sys-size-control-xl-inputPaddingY);
+  --ts-gap: var(--prime-sys-size-control-xl-gap);
+  --ts-chevron: var(--prime-sys-size-control-xl-icon);
+  border-radius: var(--prime-sys-size-control-xl-radius);
+  font-size: var(--prime-sys-size-control-xl-text);
+}
+.TagSelect_control2[data-empty=true] {
+  min-height: var(--prime-sys-size-control-m-height);
+}
+.TagSelect_control2[data-empty=true][data-size=s] {
+  min-height: var(--prime-sys-size-control-s-height);
+}
+.TagSelect_control2[data-empty=true][data-size=m] {
+  min-height: var(--prime-sys-size-control-m-height);
+}
+.TagSelect_control2[data-empty=true][data-size=l] {
+  min-height: var(--prime-sys-size-control-l-height);
+}
+.TagSelect_control2[data-empty=true][data-size=xl] {
+  min-height: var(--prime-sys-size-control-xl-height);
+}
+.TagSelect_control2:hover:not([data-disabled=true]) {
+  border-color: var(--prime-sys-color-field-borderHover);
+  background: color-mix(in srgb, var(--prime-sys-color-action-neutralBackgroundHover) 90%, var(--prime-sys-color-field-text) 10%);
+  box-shadow: none;
+}
+.TagSelect_control2:focus-within:not([data-disabled=true]) {
+  border-color: var(--prime-sys-color-field-borderFocus);
+  box-shadow: var(--prime-sys-elevation-shadow-buttonFocus);
+}
+.TagSelect_control2[data-has-error=true] {
+  border-color: var(--prime-sys-color-field-borderError);
+}
+.TagSelect_control2[data-has-error=true]:focus-within {
+  box-shadow: var(--prime-sys-elevation-shadow-errorFocus);
+}
+.TagSelect_control2[data-disabled=true] {
+  background: var(--prime-sys-color-surface-accentSoft);
+  border-color: transparent;
+  box-shadow: none;
+  cursor: not-allowed;
+  color: var(--prime-sys-color-content-disabled);
+}
+.TagSelect_chips2 {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ts-gap);
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+}
+.TagSelect_chip2 {
+  display: inline-flex;
+  max-width: 100%;
+}
+.TagSelect_chipBadge2 {
+  max-width: 100%;
+  min-width: 0;
+}
+.TagSelect_chipLabel2 {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.TagSelect_chipRemove2 {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--prime-sys-shape-radius-s);
+  background: transparent;
+  color: inherit;
+  opacity: 0.8;
+  cursor: pointer;
+  transition: opacity var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
+}
+.TagSelect_chipRemove2:hover:not(:disabled) {
+  opacity: 1;
+}
+.TagSelect_chipRemove2:focus-visible {
+  outline: none;
+  box-shadow: var(--prime-sys-elevation-shadow-buttonFocus);
+}
+.TagSelect_chipRemove2:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.TagSelect_removeIcon2 {
+  display: block;
+  width: 0.625rem;
+  height: 0.625rem;
+}
+.TagSelect_input2 {
+  flex: 1 1 4rem;
+  min-width: 2rem;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: var(--prime-sys-typography-body-lineHeight);
+  outline: none;
+}
+.TagSelect_inputCollapsed2 {
+  flex: 0 1 0;
+  min-width: 0;
+  width: 0;
+  height: 0;
+  min-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  line-height: 0;
+  font-size: 0;
+}
+.TagSelect_input2::placeholder {
+  color: var(--prime-sys-color-field-placeholder);
+}
+.TagSelect_control2[data-disabled=true] .TagSelect_input2::placeholder {
+  color: var(--prime-sys-color-content-disabled);
+}
+.TagSelect_chevronSlot2 {
+  position: absolute;
+  top: 50%;
+  right: var(--ts-pad-x);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ts-chevron);
+  min-width: var(--ts-chevron);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+.TagSelect_chevron2 {
+  display: block;
+  flex-shrink: 0;
+  width: var(--prime-sys-unit-0p45rem);
+  height: var(--prime-sys-unit-0p45rem);
+  border-right: var(--prime-sys-unit-1p5px) solid currentColor;
+  border-bottom: var(--prime-sys-unit-1p5px) solid currentColor;
+  transform: rotate(45deg) translateY(-10%);
+  opacity: 0.6;
+  transition: transform var(--prime-sys-motion-medium) var(--prime-sys-motion-standard), opacity var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
+}
+.TagSelect_control2[data-open=true] .TagSelect_chevron2 {
+  transform: rotate(225deg) translateY(-10%);
+}
+.TagSelect_panelInner2 {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+}
+.TagSelect_hint2 {
+  padding-inline: var(--prime-sys-spacing-x3);
+  padding-block: var(--prime-sys-spacing-x2) var(--prime-sys-spacing-x1);
+}
+.TagSelect_optionRow2 {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-sys-spacing-x2);
+  width: 100%;
+  min-width: 0;
+  cursor: pointer;
+  border: none;
+  background: none;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  padding-inline: var(--prime-sys-spacing-x3);
+  padding-block: var(--prime-sys-spacing-x2);
+  border-radius: var(--prime-sys-shape-radius-m);
+  transition: background var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
+}
+.TagSelect_optionRow2:hover:not([data-disabled=true]) {
+  background: var(--prime-sys-color-action-neutralBackgroundHover);
+}
+.TagSelect_optionRow2[data-highlighted=true]:not([data-disabled=true]) {
+  background: var(--prime-sys-color-action-neutralBackgroundHover);
+}
+.TagSelect_optionRow2[data-disabled=true] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.TagSelect_createRow2 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--prime-sys-spacing-x2);
+  width: 100%;
+  min-width: 0;
+  cursor: pointer;
+  border: none;
+  background: none;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  padding-inline: var(--prime-sys-spacing-x3);
+  padding-block: var(--prime-sys-spacing-x2);
+  border-radius: var(--prime-sys-shape-radius-m);
+  transition: background var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
+}
+.TagSelect_createRow2:hover:not([data-disabled=true]),
+.TagSelect_createRow2[data-highlighted=true]:not([data-disabled=true]) {
+  background: var(--prime-sys-color-action-neutralBackgroundHover);
+}
+.TagSelect_createLabel2 {
+  flex-shrink: 0;
+}
+
 /* src/components/textarea/Textarea.module.css */
 .Textarea_field2 {
   --prime-textarea-body-size: var(--prime-sys-size-control-m-text);