mautourco-components 0.2.4 → 0.2.7

package/src/styles/components/selected-value.css

@@ -1,80 +1,80 @@
-/* SelectedValue Component Styles */
-.selected-value {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--chip-spacing-gap, 0.5rem);
-  padding: var(--chip-spacing-sm-padding-y, 0.375rem) var(--chip-spacing-sm-padding-x);
-  border-radius: var(--chip-border-radius-pill, 1.375rem);
-  /* Typography is now handled by the Text component */
-  background: var(--color-atoll-green-800);
-  color: var(--color-white);
-  cursor: default;
-  user-select: none;
-  max-width: 200px;
-  width: auto;
-  opacity: var(--opacity-opacity-100);
-}
-
-/* Variant: text-only (no background, no padding) */
-.selected-value--text {
-  background: transparent;
-  padding: 0;
-  color: var(--color-slate-900);
-}
-
-.selected-value__text {
-  color: inherit;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  /* Typography styles are now handled by the Text component */
-}
-
-.selected-value__remove {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  border-radius: 2px;
-  flex-shrink: 0;
-}
-
-.selected-value__remove:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.selected-value__remove:focus {
-  outline: 2px solid var(--color-atoll-green-800);
-  outline-offset: 1px;
-}
-
-.selected-value__remove-icon {
-  color: var(--color-white);
-}
-
-/* Size variants */
-.selected-value--xs {
-  padding: var(--chip-spacing-xs-padding-y, 0.25rem) var(--chip-spacing-xs-padding-x, 0.5rem);
-  gap: var(--chip-spacing-xs-gap, 0.25rem);
-}
-
-.selected-value--sm {
-  padding: var(--chip-spacing-sm-padding-y, 0.375rem) var(--chip-spacing-sm-padding-x, 0.75rem);
-  gap: var(--chip-spacing-sm-gap, 0.375rem);
-}
-
-.selected-value--md {
-  padding: var(--chip-spacing-md-padding-y, 0.5rem) var(--chip-spacing-md-padding-x, 0.875rem);
-  gap: var(--chip-spacing-md-gap, 0.5rem);
-}
-
-.selected-value--lg {
-  padding: var(--chip-spacing-lg-padding-y, 0.625rem) var(--chip-spacing-lg-padding-x, 1rem);
-  gap: var(--chip-spacing-lg-gap, 0.625rem);
-}
-
+/* SelectedValue Component Styles */
+.selected-value {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--chip-spacing-gap, 0.5rem);
+  padding: var(--chip-spacing-sm-padding-y, 0.375rem) var(--chip-spacing-sm-padding-x);
+  border-radius: var(--chip-border-radius-pill, 1.375rem);
+  /* Typography is now handled by the Text component */
+  background: var(--color-atoll-green-800);
+  color: var(--color-white);
+  cursor: default;
+  user-select: none;
+  max-width: 200px;
+  width: auto;
+  opacity: var(--opacity-opacity-100);
+}
+
+/* Variant: text-only (no background, no padding) */
+.selected-value--text {
+  background: transparent;
+  padding: 0;
+  color: var(--color-slate-900);
+}
+
+.selected-value__text {
+  color: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  /* Typography styles are now handled by the Text component */
+}
+
+.selected-value__remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.selected-value__remove:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.selected-value__remove:focus {
+  outline: 2px solid var(--color-atoll-green-800);
+  outline-offset: 1px;
+}
+
+.selected-value__remove-icon {
+  color: var(--color-white);
+}
+
+/* Size variants */
+.selected-value--xs {
+  padding: var(--chip-spacing-xs-padding-y, 0.25rem) var(--chip-spacing-xs-padding-x, 0.5rem);
+  gap: var(--chip-spacing-xs-gap, 0.25rem);
+}
+
+.selected-value--sm {
+  padding: var(--chip-spacing-sm-padding-y, 0.375rem) var(--chip-spacing-sm-padding-x, 0.75rem);
+  gap: var(--chip-spacing-sm-gap, 0.375rem);
+}
+
+.selected-value--md {
+  padding: var(--chip-spacing-md-padding-y, 0.5rem) var(--chip-spacing-md-padding-x, 0.875rem);
+  gap: var(--chip-spacing-md-gap, 0.5rem);
+}
+
+.selected-value--lg {
+  padding: var(--chip-spacing-lg-padding-y, 0.625rem) var(--chip-spacing-lg-padding-x, 1rem);
+  gap: var(--chip-spacing-lg-gap, 0.625rem);
+}
+

package/src/styles/components/slider.css

@@ -1,86 +1,86 @@
-.slider-container {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-
-/**
- * Base slider styles.
- * Detailed visual styles (colors, sizes, radii) will be aligned
- * with Figma using design tokens in a second step.
- */
-.slider {
-  width: 100%;
-  -webkit-appearance: none;
-  appearance: none;
-  background: transparent;
-}
-
-/* Track */
-.slider::-webkit-slider-runnable-track {
-  height: var(--slider-track-height, 4px);
-  border-radius: var(--slider-track-radius, 9999px);
-  background-color: var(
-    --slider-track-background,
-    var(--price-slider-color-slider-background-default, #e5e5e5)
-  );
-}
-
-.slider::-moz-range-track {
-  height: var(--slider-track-height, 4px);
-  border-radius: var(--slider-track-radius, 9999px);
-  background-color: var(
-    --slider-track-background,
-    var(--price-slider-color-slider-background-default, #e5e5e5)
-  );
-}
-
-/* Thumb */
-.slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: var(--slider-thumb-size, 16px);
-  height: var(--slider-thumb-size, 16px);
-  border-radius: 9999px;
-  background-color: var(
-    --slider-thumb-background,
-    var(--price-slider-color-slider-foreground-default, #0f7173)
-  );
-  border: var(--slider-thumb-border-width, 2px) solid
-    var(--slider-thumb-border-color, #ffffff);
-  margin-top: calc((var(--slider-track-height, 4px) - var(--slider-thumb-size, 16px)) / 2);
-}
-
-.slider::-moz-range-thumb {
-  width: var(--slider-thumb-size, 16px);
-  height: var(--slider-thumb-size, 16px);
-  border-radius: 9999px;
-  background-color: var(
-    --slider-thumb-background,
-    var(--price-slider-color-slider-foreground-default, #0f7173)
-  );
-  border: var(--slider-thumb-border-width, 2px) solid
-    var(--slider-thumb-border-color, #ffffff);
-}
-
-/* Variants (from Figma: Full / Half) */
-.slider--full {
-  --slider-track-background: var(
-    --slider-color-track-filled,
-    var(--price-slider-color-slider-foreground-default, #0f7173)
-  );
-}
-
-.slider--half {
-  --slider-track-background: var(
-    --slider-color-track-background,
-    var(--price-slider-color-slider-background-default, #e5e5e5)
-  );
-}
-
-.slider--disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-
+.slider-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+/**
+ * Base slider styles.
+ * Detailed visual styles (colors, sizes, radii) will be aligned
+ * with Figma using design tokens in a second step.
+ */
+.slider {
+  width: 100%;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+
+/* Track */
+.slider::-webkit-slider-runnable-track {
+  height: var(--slider-track-height, 4px);
+  border-radius: var(--slider-track-radius, 9999px);
+  background-color: var(
+    --slider-track-background,
+    var(--price-slider-color-slider-background-default, #e5e5e5)
+  );
+}
+
+.slider::-moz-range-track {
+  height: var(--slider-track-height, 4px);
+  border-radius: var(--slider-track-radius, 9999px);
+  background-color: var(
+    --slider-track-background,
+    var(--price-slider-color-slider-background-default, #e5e5e5)
+  );
+}
+
+/* Thumb */
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--slider-thumb-size, 16px);
+  height: var(--slider-thumb-size, 16px);
+  border-radius: 9999px;
+  background-color: var(
+    --slider-thumb-background,
+    var(--price-slider-color-slider-foreground-default, #0f7173)
+  );
+  border: var(--slider-thumb-border-width, 2px) solid
+    var(--slider-thumb-border-color, #ffffff);
+  margin-top: calc((var(--slider-track-height, 4px) - var(--slider-thumb-size, 16px)) / 2);
+}
+
+.slider::-moz-range-thumb {
+  width: var(--slider-thumb-size, 16px);
+  height: var(--slider-thumb-size, 16px);
+  border-radius: 9999px;
+  background-color: var(
+    --slider-thumb-background,
+    var(--price-slider-color-slider-foreground-default, #0f7173)
+  );
+  border: var(--slider-thumb-border-width, 2px) solid
+    var(--slider-thumb-border-color, #ffffff);
+}
+
+/* Variants (from Figma: Full / Half) */
+.slider--full {
+  --slider-track-background: var(
+    --slider-color-track-filled,
+    var(--price-slider-color-slider-foreground-default, #0f7173)
+  );
+}
+
+.slider--half {
+  --slider-track-background: var(
+    --slider-color-track-background,
+    var(--price-slider-color-slider-background-default, #e5e5e5)
+  );
+}
+
+.slider--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+