@1money/component-ui 0.0.48 → 0.0.50

package/es/components/Radio/style/Radio.css

@@ -1 +1,362 @@
-.om-component-ui-radio{display:inline-flex;gap:var(--om-spacing-300,12px);align-items:flex-start;cursor:pointer}.om-component-ui-radio-box-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;height:calc(var(--om-body-lg-font-size) * 1.375)}.om-component-ui-radio-input{position:absolute;inset:0;margin:0;cursor:inherit;opacity:0}.om-component-ui-radio-box{position:relative;display:flex;align-items:center;justify-content:center;width:var(--om-spacing-400,16px);height:var(--om-spacing-400,16px);overflow:hidden;background-color:var(--om-bg-default,#fff);border:1px solid var(--om-border-default-secondary,#9fa3a3);border-radius:var(--om-radius-full,9999px);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.om-component-ui-radio-box:after{position:absolute;width:var(--om-spacing-200,8px);height:var(--om-spacing-200,8px);background-color:var(--om-icon-on-brand,#dde6f4);border-radius:var(--om-radius-full,9999px);transform:scale(0);opacity:0;transition:transform .2s ease,opacity .2s ease;content:""}.om-component-ui-radio-input:checked+.om-component-ui-radio-box{background-color:var(--om-bg-brand,#073387);border-color:var(--om-bg-brand,#073387)}.om-component-ui-radio-input:checked+.om-component-ui-radio-box:after{transform:scale(1);opacity:1}.om-component-ui-radio-input:focus-visible+.om-component-ui-radio-box{border-color:var(--om-border-brand,#073387);box-shadow:0 0 0 1px var(--om-border-brand,#073387)}.om-component-ui-radio-content{display:flex;flex:1 0 0;flex-direction:column;min-width:0}.om-component-ui-radio-label{font-size:var(--om-body-lg-font-size);font-family:var(--om-body-lg-font-family);line-height:var(--om-body-lg-line-height);letter-spacing:var(--om-body-lg-letter-spacing);font-weight:var(--om-body-lg-strong-font-weight);color:var(--om-text-default,#131313)}.om-component-ui-radio-description{font-size:var(--om-body-md-font-size);font-family:var(--om-body-md-font-family);line-height:var(--om-body-md-line-height);letter-spacing:var(--om-body-md-letter-spacing);font-weight:var(--om-body-md-strong-font-weight);color:var(--om-text-default-tertiary,#646465)}.om-component-ui-radio-tag{display:inline-flex;margin-top:var(--om-spacing-100,4px)}.om-component-ui-radio-cell{position:relative;display:block;width:100%;min-width:0}.om-component-ui-radio-cell-input{position:absolute;inset:0;z-index:1;margin:0;cursor:inherit;opacity:0}.om-component-ui-radio-cell-panel{--om-radio-cell-icon:var(--om-icon-default,#131313);--om-radio-cell-indicator-icon:var(--om-icon-on-brand,#dde6f4);position:relative;display:flex;gap:var(--om-spacing-300,12px);align-items:center;box-sizing:border-box;width:100%;min-width:0;height:100%;background-color:var(--om-bg-default,#fff);border:1px solid var(--om-border-default,#d1d2d2);border-radius:var(--om-radius-300,12px);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.om-component-ui-radio-cell-icon,.om-component-ui-radio-cell-indicator,.om-component-ui-radio-cell-radio{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.om-component-ui-radio-cell-indicator{width:var(--om-spacing-800,32px);height:var(--om-spacing-800,32px);color:var(--om-radio-cell-icon);background-color:var(--om-bg-neutral-tertiary,#f0f0f0);border-radius:var(--om-radius-full,9999px);transition:background-color .2s ease,color .2s ease}.om-component-ui-radio-cell-indicator-compact{width:var(--om-spacing-600,24px);height:var(--om-spacing-600,24px)}.om-component-ui-radio-cell-icon{color:var(--om-radio-cell-icon)}.om-component-ui-radio-cell-radio{width:var(--om-spacing-400,16px);height:var(--om-spacing-400,16px);background-color:var(--om-bg-default,#fff);border:1px solid var(--om-border-default-secondary,#9fa3a3);border-radius:var(--om-radius-full,9999px);transition:background-color .2s ease,border-color .2s ease}.om-component-ui-radio-cell-radio-dot{width:var(--om-spacing-100,4px);height:var(--om-spacing-100,4px);background-color:var(--om-icon-on-brand,#dde6f4);border-radius:var(--om-radius-full,9999px);transform:scale(0);opacity:0;transition:transform .2s ease,opacity .2s ease}.om-component-ui-radio-cell .om-component-ui-radio-content{display:flex;flex:1 0 0;flex-direction:column;min-width:0}.om-component-ui-radio-cell .om-component-ui-radio-label{font-size:var(--om-body-lg-font-size);font-family:var(--om-body-lg-font-family);line-height:var(--om-body-lg-line-height);letter-spacing:var(--om-body-lg-letter-spacing);font-weight:var(--om-body-lg-strong-font-weight)}.om-component-ui-radio-cell .om-component-ui-radio-description{font-size:var(--om-body-md-font-size);font-family:var(--om-body-md-font-family);line-height:var(--om-body-md-line-height);letter-spacing:var(--om-body-md-letter-spacing);font-weight:var(--om-body-md-font-weight)}.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-large .om-component-ui-radio-cell-panel{padding:var(--om-spacing-400,16px)}.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-medium .om-component-ui-radio-cell-panel,.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-small .om-component-ui-radio-cell-panel{padding:var(--om-spacing-300,12px) var(--om-spacing-400,16px)}.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-medium .om-component-ui-radio-label{font-size:var(--om-body-lg-font-size);font-family:var(--om-body-lg-font-family);line-height:var(--om-body-lg-line-height);letter-spacing:var(--om-body-lg-letter-spacing);font-weight:var(--om-body-lg-font-weight)}.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-small .om-component-ui-radio-content{justify-content:center}.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-small .om-component-ui-radio-label{font-size:var(--om-body-lg-font-size);font-family:var(--om-body-lg-font-family);line-height:var(--om-body-lg-line-height);letter-spacing:var(--om-body-lg-letter-spacing);font-weight:var(--om-body-lg-strong-font-weight)}.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-small .om-component-ui-radio-description{font-size:var(--om-body-md-font-size);font-family:var(--om-body-md-font-family);line-height:var(--om-body-md-line-height);letter-spacing:var(--om-body-md-letter-spacing);font-weight:var(--om-body-md-strong-font-weight)}.om-component-ui-radio-cell-vertical .om-component-ui-radio-cell-panel{flex-direction:column;justify-content:center}.om-component-ui-radio-cell-vertical .om-component-ui-radio-content{align-items:center;text-align:center}.om-component-ui-radio-cell-vertical .om-component-ui-radio-description,.om-component-ui-radio-cell-vertical .om-component-ui-radio-label{text-align:center}.om-component-ui-radio-cell-vertical.om-component-ui-radio-cell-large .om-component-ui-radio-cell-panel{padding:var(--om-spacing-600,24px) var(--om-spacing-400,16px)}.om-component-ui-radio-cell-vertical.om-component-ui-radio-cell-medium .om-component-ui-radio-cell-panel,.om-component-ui-radio-cell-vertical.om-component-ui-radio-cell-small .om-component-ui-radio-cell-panel{padding:var(--om-spacing-400,16px)}.om-component-ui-radio-cell-vertical.om-component-ui-radio-cell-medium .om-component-ui-radio-label,.om-component-ui-radio-cell-vertical.om-component-ui-radio-cell-small .om-component-ui-radio-label{font-size:var(--om-body-lg-font-size);font-family:var(--om-body-lg-font-family);line-height:var(--om-body-lg-line-height);letter-spacing:var(--om-body-lg-letter-spacing);font-weight:var(--om-body-lg-font-weight)}.om-component-ui-radio-cell-input:checked+.om-component-ui-radio-cell-panel{background-color:var(--om-bg-default-secondary,#f8f8f8);border-color:var(--om-border-brand,#073387)}.om-component-ui-radio-cell-input:checked+.om-component-ui-radio-cell-panel .om-component-ui-radio-cell-indicator{background-color:var(--om-bg-brand,#073387)}.om-component-ui-radio-cell-input:checked+.om-component-ui-radio-cell-panel .om-component-ui-radio-cell-radio{background-color:var(--om-bg-brand,#073387);border-color:var(--om-border-brand,#073387)}.om-component-ui-radio-cell-input:checked+.om-component-ui-radio-cell-panel .om-component-ui-radio-cell-radio-dot{transform:scale(1);opacity:1}.om-component-ui-radio-cell-vertical .om-component-ui-radio-cell-input:checked+.om-component-ui-radio-cell-panel{border-width:1px}.om-component-ui-radio-cell-input:focus-visible+.om-component-ui-radio-cell-panel{border-color:var(--om-border-brand,#073387);box-shadow:0 0 0 1px var(--om-border-brand,#073387)}.om-component-ui-radio:not(.om-component-ui-radio-disabled):hover .om-component-ui-radio-box{border-color:var(--om-border-default-tertiary,#404042)}.om-component-ui-radio:not(.om-component-ui-radio-disabled):hover .om-component-ui-radio-input:checked+.om-component-ui-radio-box{background-color:var(--om-bg-brand-hover,#052561);border-color:var(--om-bg-brand-hover,#052561)}.om-component-ui-radio:not(.om-component-ui-radio-disabled):hover .om-component-ui-radio-cell-panel{border-color:var(--om-border-default-tertiary,#404042)}.om-component-ui-radio:not(.om-component-ui-radio-disabled):hover .om-component-ui-radio-cell-input:checked+.om-component-ui-radio-cell-panel{border-color:var(--om-border-brand,#073387)}.om-component-ui-radio-disabled{cursor:not-allowed}.om-component-ui-radio-disabled .om-component-ui-radio-box,.om-component-ui-radio-disabled .om-component-ui-radio-input:checked+.om-component-ui-radio-box{background-color:var(--om-bg-disabled,#f0f0f0);border-color:var(--om-border-disabled,#e3e4e4)}.om-component-ui-radio-disabled .om-component-ui-radio-input:checked+.om-component-ui-radio-box:after{background-color:var(--om-icon-on-disabled,#bbbdc1)}.om-component-ui-radio-disabled .om-component-ui-radio-description,.om-component-ui-radio-disabled .om-component-ui-radio-label{color:var(--om-text-disabled,#bbbdc1)}.om-component-ui-radio-disabled .om-component-ui-radio-cell-panel{background-color:var(--om-bg-disabled,#f0f0f0);border-color:var(--om-border-disabled,#e3e4e4)}.om-component-ui-radio-disabled .om-component-ui-radio-cell-indicator{color:var(--om-icon-on-disabled,#bbbdc1);background-color:var(--om-bg-disabled,#f0f0f0)}.om-component-ui-radio-disabled .om-component-ui-radio-cell-icon{color:var(--om-icon-disabled,#d1d2d2)}.om-component-ui-radio-disabled .om-component-ui-radio-cell-radio{background-color:var(--om-bg-disabled,#f0f0f0);border-color:var(--om-border-disabled,#e3e4e4)}.om-component-ui-radio-disabled .om-component-ui-radio-cell-radio-dot{background-color:var(--om-icon-on-disabled,#bbbdc1)}.om-component-ui-radio-disabled .om-component-ui-radio-tag{opacity:.6}.om-component-ui-radio-right .om-component-ui-radio-box-wrapper{order:1}.om-component-ui-radio-right .om-component-ui-radio-content{order:0}.om-component-ui-radio-right .om-component-ui-radio-cell-icon,.om-component-ui-radio-right .om-component-ui-radio-cell-indicator,.om-component-ui-radio-right .om-component-ui-radio-cell-radio{order:1}.om-component-ui-radio-right .om-component-ui-radio-cell .om-component-ui-radio-content{order:0}.om-component-ui-radio-group{display:flex}.om-component-ui-radio-group-vertical{flex-direction:column;gap:var(--om-spacing-300,12px)}.om-component-ui-radio-group-horizontal{flex-flow:row wrap;gap:var(--om-spacing-600,24px)}.om-component-ui-radio-group-cell.om-component-ui-radio-group-vertical{gap:var(--om-spacing-300,12px)}.om-component-ui-radio-group-cell.om-component-ui-radio-group-vertical>.om-component-ui-radio{width:100%}.om-component-ui-radio-group-cell.om-component-ui-radio-group-horizontal{gap:var(--om-spacing-300,12px);align-items:stretch}.om-component-ui-radio-group-cell.om-component-ui-radio-group-horizontal>.om-component-ui-radio{flex:1 1 0;min-width:0}
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-component-ui-radio {
+  display: inline-flex;
+  gap: var(--om-spacing-300, 12px);
+  align-items: flex-start;
+  cursor: pointer;
+}
+.om-component-ui-radio-box-wrapper {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  height: calc(var(--om-body-lg-font-size) * 1.375);
+}
+.om-component-ui-radio-input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  cursor: inherit;
+  opacity: 0;
+}
+.om-component-ui-radio-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--om-spacing-400, 16px);
+  height: var(--om-spacing-400, 16px);
+  overflow: hidden;
+  background-color: var(--om-bg-default, #fff);
+  border: 1px solid var(--om-border-default-secondary, #9fa3a3);
+  border-radius: var(--om-radius-full, 9999px);
+  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.om-component-ui-radio-box::after {
+  position: absolute;
+  width: var(--om-spacing-200, 8px);
+  height: var(--om-spacing-200, 8px);
+  background-color: var(--om-icon-on-brand, #dde6f4);
+  border-radius: var(--om-radius-full, 9999px);
+  transform: scale(0);
+  opacity: 0;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  content: "";
+}
+.om-component-ui-radio-input:checked + .om-component-ui-radio-box {
+  background-color: var(--om-bg-brand, #073387);
+  border-color: var(--om-bg-brand, #073387);
+}
+.om-component-ui-radio-input:checked + .om-component-ui-radio-box::after {
+  transform: scale(1);
+  opacity: 1;
+}
+.om-component-ui-radio-input:focus-visible + .om-component-ui-radio-box {
+  border-color: var(--om-border-brand, #073387);
+  box-shadow: 0 0 0 1px var(--om-border-brand, #073387);
+}
+.om-component-ui-radio-content {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  min-width: 0;
+}
+.om-component-ui-radio-label {
+  font-size: var(--om-body-lg-font-size);
+  font-family: var(--om-body-lg-font-family);
+  line-height: var(--om-body-lg-line-height);
+  letter-spacing: var(--om-body-lg-letter-spacing);
+  font-weight: var(--om-body-lg-strong-font-weight);
+  color: var(--om-text-default, #131313);
+}
+.om-component-ui-radio-description {
+  font-size: var(--om-body-md-font-size);
+  font-family: var(--om-body-md-font-family);
+  line-height: var(--om-body-md-line-height);
+  letter-spacing: var(--om-body-md-letter-spacing);
+  font-weight: var(--om-body-md-strong-font-weight);
+  color: var(--om-text-default-tertiary, #646465);
+}
+.om-component-ui-radio-tag {
+  display: inline-flex;
+  margin-top: var(--om-spacing-100, 4px);
+}
+.om-component-ui-radio-cell {
+  position: relative;
+  display: block;
+  width: 100%;
+  min-width: 0;
+}
+.om-component-ui-radio-cell-input {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  margin: 0;
+  cursor: inherit;
+  opacity: 0;
+}
+.om-component-ui-radio-cell-panel {
+  --om-radio-cell-icon: var(--om-icon-default, #131313);
+  --om-radio-cell-indicator-icon: var(--om-icon-on-brand, #dde6f4);
+  position: relative;
+  display: flex;
+  gap: var(--om-spacing-300, 12px);
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  background-color: var(--om-bg-default, #fff);
+  border: 1px solid var(--om-border-default, #d1d2d2);
+  border-radius: var(--om-radius-300, 12px);
+  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.om-component-ui-radio-cell-indicator, .om-component-ui-radio-cell-icon, .om-component-ui-radio-cell-radio {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+.om-component-ui-radio-cell-indicator {
+  width: var(--om-spacing-800, 32px);
+  height: var(--om-spacing-800, 32px);
+  color: var(--om-radio-cell-icon);
+  background-color: var(--om-bg-neutral-tertiary, #f0f0f0);
+  border-radius: var(--om-radius-full, 9999px);
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+.om-component-ui-radio-cell-indicator-compact {
+  width: var(--om-spacing-600, 24px);
+  height: var(--om-spacing-600, 24px);
+}
+.om-component-ui-radio-cell-icon {
+  color: var(--om-radio-cell-icon);
+}
+.om-component-ui-radio-cell-radio {
+  width: var(--om-spacing-400, 16px);
+  height: var(--om-spacing-400, 16px);
+  background-color: var(--om-bg-default, #fff);
+  border: 1px solid var(--om-border-default-secondary, #9fa3a3);
+  border-radius: var(--om-radius-full, 9999px);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+.om-component-ui-radio-cell-radio-dot {
+  width: var(--om-spacing-100, 4px);
+  height: var(--om-spacing-100, 4px);
+  background-color: var(--om-icon-on-brand, #dde6f4);
+  border-radius: var(--om-radius-full, 9999px);
+  transform: scale(0);
+  opacity: 0;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+.om-component-ui-radio-cell .om-component-ui-radio-content {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  min-width: 0;
+}
+.om-component-ui-radio-cell .om-component-ui-radio-label {
+  font-size: var(--om-body-lg-font-size);
+  font-family: var(--om-body-lg-font-family);
+  line-height: var(--om-body-lg-line-height);
+  letter-spacing: var(--om-body-lg-letter-spacing);
+  font-weight: var(--om-body-lg-strong-font-weight);
+}
+.om-component-ui-radio-cell .om-component-ui-radio-description {
+  font-size: var(--om-body-md-font-size);
+  font-family: var(--om-body-md-font-family);
+  line-height: var(--om-body-md-line-height);
+  letter-spacing: var(--om-body-md-letter-spacing);
+  font-weight: var(--om-body-md-font-weight);
+}
+.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-large .om-component-ui-radio-cell-panel {
+  padding: var(--om-spacing-400, 16px);
+}
+.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-medium .om-component-ui-radio-cell-panel, .om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-small .om-component-ui-radio-cell-panel {
+  padding: var(--om-spacing-300, 12px) var(--om-spacing-400, 16px);
+}
+.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-medium .om-component-ui-radio-label {
+  font-size: var(--om-body-lg-font-size);
+  font-family: var(--om-body-lg-font-family);
+  line-height: var(--om-body-lg-line-height);
+  letter-spacing: var(--om-body-lg-letter-spacing);
+  font-weight: var(--om-body-lg-font-weight);
+}
+.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-small .om-component-ui-radio-content {
+  justify-content: center;
+}
+.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-small .om-component-ui-radio-label {
+  font-size: var(--om-body-lg-font-size);
+  font-family: var(--om-body-lg-font-family);
+  line-height: var(--om-body-lg-line-height);
+  letter-spacing: var(--om-body-lg-letter-spacing);
+  font-weight: var(--om-body-lg-strong-font-weight);
+}
+.om-component-ui-radio-cell-horizontal.om-component-ui-radio-cell-small .om-component-ui-radio-description {
+  font-size: var(--om-body-md-font-size);
+  font-family: var(--om-body-md-font-family);
+  line-height: var(--om-body-md-line-height);
+  letter-spacing: var(--om-body-md-letter-spacing);
+  font-weight: var(--om-body-md-strong-font-weight);
+}
+.om-component-ui-radio-cell-vertical .om-component-ui-radio-cell-panel {
+  flex-direction: column;
+  justify-content: center;
+}
+.om-component-ui-radio-cell-vertical .om-component-ui-radio-content {
+  align-items: center;
+  text-align: center;
+}
+.om-component-ui-radio-cell-vertical .om-component-ui-radio-label,
+.om-component-ui-radio-cell-vertical .om-component-ui-radio-description {
+  text-align: center;
+}
+.om-component-ui-radio-cell-vertical.om-component-ui-radio-cell-large .om-component-ui-radio-cell-panel {
+  padding: var(--om-spacing-600, 24px) var(--om-spacing-400, 16px);
+}
+.om-component-ui-radio-cell-vertical.om-component-ui-radio-cell-medium .om-component-ui-radio-cell-panel, .om-component-ui-radio-cell-vertical.om-component-ui-radio-cell-small .om-component-ui-radio-cell-panel {
+  padding: var(--om-spacing-400, 16px);
+}
+.om-component-ui-radio-cell-vertical.om-component-ui-radio-cell-medium .om-component-ui-radio-label, .om-component-ui-radio-cell-vertical.om-component-ui-radio-cell-small .om-component-ui-radio-label {
+  font-size: var(--om-body-lg-font-size);
+  font-family: var(--om-body-lg-font-family);
+  line-height: var(--om-body-lg-line-height);
+  letter-spacing: var(--om-body-lg-letter-spacing);
+  font-weight: var(--om-body-lg-font-weight);
+}
+.om-component-ui-radio-cell-input:checked + .om-component-ui-radio-cell-panel {
+  background-color: var(--om-bg-default-secondary, #f8f8f8);
+  border-color: var(--om-border-brand, #073387);
+}
+.om-component-ui-radio-cell-input:checked + .om-component-ui-radio-cell-panel .om-component-ui-radio-cell-indicator {
+  background-color: var(--om-bg-brand, #073387);
+}
+.om-component-ui-radio-cell-input:checked + .om-component-ui-radio-cell-panel .om-component-ui-radio-cell-radio {
+  background-color: var(--om-bg-brand, #073387);
+  border-color: var(--om-border-brand, #073387);
+}
+.om-component-ui-radio-cell-input:checked + .om-component-ui-radio-cell-panel .om-component-ui-radio-cell-radio-dot {
+  transform: scale(1);
+  opacity: 1;
+}
+.om-component-ui-radio-cell-vertical .om-component-ui-radio-cell-input:checked + .om-component-ui-radio-cell-panel {
+  border-width: 1px;
+}
+.om-component-ui-radio-cell-input:focus-visible + .om-component-ui-radio-cell-panel {
+  border-color: var(--om-border-brand, #073387);
+  box-shadow: 0 0 0 1px var(--om-border-brand, #073387);
+}
+.om-component-ui-radio:not(.om-component-ui-radio-disabled):hover .om-component-ui-radio-box {
+  border-color: var(--om-border-default-tertiary, #404042);
+}
+.om-component-ui-radio:not(.om-component-ui-radio-disabled):hover .om-component-ui-radio-input:checked + .om-component-ui-radio-box {
+  background-color: var(--om-bg-brand-hover, #052561);
+  border-color: var(--om-bg-brand-hover, #052561);
+}
+.om-component-ui-radio:not(.om-component-ui-radio-disabled):hover .om-component-ui-radio-cell-panel {
+  border-color: var(--om-border-default-tertiary, #404042);
+}
+.om-component-ui-radio:not(.om-component-ui-radio-disabled):hover .om-component-ui-radio-cell-input:checked + .om-component-ui-radio-cell-panel {
+  border-color: var(--om-border-brand, #073387);
+}
+.om-component-ui-radio-disabled {
+  cursor: not-allowed;
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-box {
+  background-color: var(--om-bg-disabled, #f0f0f0);
+  border-color: var(--om-border-disabled, #e3e4e4);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-input:checked + .om-component-ui-radio-box {
+  background-color: var(--om-bg-disabled, #f0f0f0);
+  border-color: var(--om-border-disabled, #e3e4e4);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-input:checked + .om-component-ui-radio-box::after {
+  background-color: var(--om-icon-on-disabled, #bbbdc1);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-label,
+.om-component-ui-radio-disabled .om-component-ui-radio-description {
+  color: var(--om-text-disabled, #bbbdc1);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-cell-panel {
+  background-color: var(--om-bg-disabled, #f0f0f0);
+  border-color: var(--om-border-disabled, #e3e4e4);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-cell-indicator {
+  color: var(--om-icon-on-disabled, #bbbdc1);
+  background-color: var(--om-bg-disabled, #f0f0f0);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-cell-icon {
+  color: var(--om-icon-disabled, #d1d2d2);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-cell-radio {
+  background-color: var(--om-bg-disabled, #f0f0f0);
+  border-color: var(--om-border-disabled, #e3e4e4);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-cell-radio-dot {
+  background-color: var(--om-icon-on-disabled, #bbbdc1);
+}
+.om-component-ui-radio-disabled .om-component-ui-radio-tag {
+  opacity: 0.6;
+}
+.om-component-ui-radio-right .om-component-ui-radio-box-wrapper {
+  order: 1;
+}
+.om-component-ui-radio-right .om-component-ui-radio-content {
+  order: 0;
+}
+.om-component-ui-radio-right .om-component-ui-radio-cell-indicator,
+.om-component-ui-radio-right .om-component-ui-radio-cell-icon,
+.om-component-ui-radio-right .om-component-ui-radio-cell-radio {
+  order: 1;
+}
+.om-component-ui-radio-right .om-component-ui-radio-cell .om-component-ui-radio-content {
+  order: 0;
+}
+
+.om-component-ui-radio-group {
+  display: flex;
+}
+.om-component-ui-radio-group-vertical {
+  flex-direction: column;
+  gap: var(--om-spacing-300, 12px);
+}
+.om-component-ui-radio-group-horizontal {
+  flex-flow: row wrap;
+  gap: var(--om-spacing-600, 24px);
+}
+.om-component-ui-radio-group-cell.om-component-ui-radio-group-vertical {
+  gap: var(--om-spacing-300, 12px);
+}
+.om-component-ui-radio-group-cell.om-component-ui-radio-group-vertical > .om-component-ui-radio {
+  width: 100%;
+}
+.om-component-ui-radio-group-cell.om-component-ui-radio-group-horizontal {
+  gap: var(--om-spacing-300, 12px);
+  align-items: stretch;
+}
+.om-component-ui-radio-group-cell.om-component-ui-radio-group-horizontal > .om-component-ui-radio {
+  flex: 1 1 0;
+  min-width: 0;
+}

package/es/components/Segment/style/Segment.css

@@ -1 +1,79 @@
-.om-component-ui-segment{display:inline-flex}.om-component-ui-segment-track{position:relative;display:inline-flex;gap:var(--om-spacing-100,4px);align-items:center;padding:var(--om-spacing-100,4px);background-color:var(--om-bg-neutral-tertiary,#f0f0f0);border-radius:var(--om-radius-full,9999px)}.om-component-ui-segment-indicator{position:absolute;top:var(--om-spacing-100,4px);bottom:var(--om-spacing-100,4px);left:0;z-index:0;background-color:var(--om-bg-neutral,#131313);border-radius:var(--om-radius-full,9999px);transition:transform .3s cubic-bezier(.645,.045,.355,1),width .3s cubic-bezier(.645,.045,.355,1)}.om-component-ui-segment-item{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:calc(var(--om-spacing-800, 32px) + var(--om-spacing-100, 4px));padding:var(--om-spacing-200,8px) var(--om-spacing-400,16px);color:var(--om-text-default-tertiary,#646465);background:none;border:none;border-radius:var(--om-radius-full,9999px);outline:none;cursor:pointer;transition:color .2s ease;font-size:var(--om-label-lg-font-size);font-family:var(--om-label-lg-font-family);line-height:var(--om-label-lg-line-height);letter-spacing:var(--om-label-lg-letter-spacing);font-weight:var(--om-label-lg-font-weight)}.om-component-ui-segment-item:hover:not(.om-component-ui-segment-item-disabled):not(.om-component-ui-segment-item-active){color:var(--om-text-default,#131313)}.om-component-ui-segment-item-active{color:var(--om-text-on-neutral,#fff)}.om-component-ui-segment-item-disabled{color:var(--om-text-disabled,#bbbdc1);cursor:not-allowed}.om-component-ui-segment-item-label{white-space:nowrap}
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-component-ui-segment {
+  display: inline-flex;
+}
+.om-component-ui-segment-track {
+  position: relative;
+  display: inline-flex;
+  gap: var(--om-spacing-100, 4px);
+  align-items: center;
+  padding: var(--om-spacing-100, 4px);
+  background-color: var(--om-bg-neutral-tertiary, #f0f0f0);
+  border-radius: var(--om-radius-full, 9999px);
+}
+.om-component-ui-segment-indicator {
+  position: absolute;
+  top: var(--om-spacing-100, 4px);
+  bottom: var(--om-spacing-100, 4px);
+  left: 0;
+  z-index: 0;
+  background-color: var(--om-bg-neutral, #131313);
+  border-radius: var(--om-radius-full, 9999px);
+  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.om-component-ui-segment-item {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: calc(var(--om-spacing-800, 32px) + var(--om-spacing-100, 4px));
+  padding: var(--om-spacing-200, 8px) var(--om-spacing-400, 16px);
+  color: var(--om-text-default-tertiary, #646465);
+  background: none;
+  border: none;
+  border-radius: var(--om-radius-full, 9999px);
+  outline: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+  font-size: var(--om-label-lg-font-size);
+  font-family: var(--om-label-lg-font-family);
+  line-height: var(--om-label-lg-line-height);
+  letter-spacing: var(--om-label-lg-letter-spacing);
+  font-weight: var(--om-label-lg-font-weight);
+}
+.om-component-ui-segment-item:hover:not(.om-component-ui-segment-item-disabled):not(.om-component-ui-segment-item-active) {
+  color: var(--om-text-default, #131313);
+}
+.om-component-ui-segment-item-active {
+  color: var(--om-text-on-neutral, #fff);
+}
+.om-component-ui-segment-item-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+  cursor: not-allowed;
+}
+.om-component-ui-segment-item-label {
+  white-space: nowrap;
+}