aeico-components 0.1.1 → 0.1.3

package/src/styles/components/checkbox.css

@@ -1,78 +1,78 @@
-:host {
-  display: block;
-  flex: 1;
-  min-width: 0;
-  font-size: var(--size-base);
-
-  /* Layout */
-  --checkbox-field-gap: 4px;
-
-  /* Checkbox */
-  --checkbox-size: 1.167em;
-  --checkbox-border-width: 1px;
-  --checkbox-border-radius: 2px;
-  --checkbox-border-color: var(--border-subtle);
-  --checkbox-bg: var(--surface-base);
-  --checkbox-accent-color: var(--color-solid);
-
-  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */
-  --color-solid: var(--color-primary);
-}
-
-.checkbox-container {
-  display: flex;
-  align-items: center;
-  gap: var(--checkbox-field-gap);
-  width: 100%;
-}
-
-.checkbox-wrapper {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-
-.field-input {
-  width: var(--checkbox-size);
-  height: var(--checkbox-size);
-  cursor: pointer;
-  border: var(--checkbox-border-width) solid var(--checkbox-border-color);
-  border-radius: var(--checkbox-border-radius);
-  background: var(--checkbox-bg);
-  accent-color: var(--checkbox-accent-color);
-  margin: 0;
-  flex-shrink: 0;
-}
-
-.field-input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* action buttons */
-.reset-btn,
-.clear-btn {
-  width: 1.333em;
-  height: 1.333em;
-  border: none;
-  border-radius: var(--reset-btn-border-radius);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--reset-btn-bg);
-  color: var(--reset-btn-color);
-  transition: var(--reset-btn-transition);
-  flex-shrink: 0;
-  line-height: 1;
-}
-
-.reset-btn:hover {
-  background: var(--reset-btn-bg-hover);
-  color: var(--reset-btn-color-hover);
-}
-
-.clear-btn:hover {
-  background: var(--clear-btn-bg-hover);
-  color: var(--clear-btn-color-hover);
-}
+:host {
+  display: block;
+  flex: 1;
+  min-width: 0;
+  font-size: var(--size-base);
+
+  /* Layout */
+  --checkbox-field-gap: 4px;
+
+  /* Checkbox */
+  --checkbox-size: 1.167em;
+  --checkbox-border-width: 1px;
+  --checkbox-border-radius: 2px;
+  --checkbox-border-color: var(--border-subtle);
+  --checkbox-bg: var(--surface-base);
+  --checkbox-accent-color: var(--color-solid);
+
+  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */
+  --color-solid: var(--color-primary);
+}
+
+.checkbox-container {
+  display: flex;
+  align-items: center;
+  gap: var(--checkbox-field-gap);
+  width: 100%;
+}
+
+.checkbox-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.field-input {
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  cursor: pointer;
+  border: var(--checkbox-border-width) solid var(--checkbox-border-color);
+  border-radius: var(--checkbox-border-radius);
+  background: var(--checkbox-bg);
+  accent-color: var(--checkbox-accent-color);
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.field-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* action buttons */
+.reset-btn,
+.clear-btn {
+  width: 1.333em;
+  height: 1.333em;
+  border: none;
+  border-radius: var(--reset-btn-border-radius);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--reset-btn-bg);
+  color: var(--reset-btn-color);
+  transition: var(--reset-btn-transition);
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.reset-btn:hover {
+  background: var(--reset-btn-bg-hover);
+  color: var(--reset-btn-color-hover);
+}
+
+.clear-btn:hover {
+  background: var(--clear-btn-bg-hover);
+  color: var(--clear-btn-color-hover);
+}

package/src/styles/components/detail.css

@@ -1,127 +1,127 @@
-:host {
-  display: block;
-
-  --detail-bg:         var(--color-solid);
-  --detail-color:      var(--color-on-solid);
-  --detail-border:     var(--color-solid);
-  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);
-  --detail-radius:     6px;
-}
-
-:host([variant="faint"]) {
-  --detail-bg:         var(--color-bg-subtle);
-  --detail-color:      var(--color-text-subtle);
-  --detail-border:     var(--color-border-subtle);
-  --detail-header-bg:  var(--color-bg-subtle);
-}
-
-:host([variant="subtle"]) {
-  --detail-bg:         transparent;
-  --detail-color:      var(--color-text-main);
-  --detail-border:     transparent;
-  --detail-header-bg:  transparent;
-}
-
-:host([variant="filled"]) {
-  --detail-bg:         var(--color-solid);
-  --detail-color:      var(--color-on-solid);
-  --detail-border:     var(--color-solid);
-  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);
-}
-
-:host([variant="outlined"]) {
-  --detail-bg:         transparent;
-  --detail-color:      var(--color-text-subtle);
-  --detail-border:     var(--color-border);
-  --detail-header-bg:  transparent;
-}
-
-:host([disabled]) {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.detail {
-  border: 1px solid var(--detail-border);
-  border-radius: var(--detail-radius);
-  color: var(--detail-color);
-  background: var(--detail-bg);
-  overflow: hidden;
-}
-
-.summary {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: 10px 14px;
-  background: var(--detail-header-bg);
-  color: inherit;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: 500;
-  border: none;
-  cursor: pointer;
-  text-align: left;
-  outline-offset: -2px;
-  user-select: none;
-}
-
-.summary:hover {
-  filter: brightness(0.93);
-}
-
-.summary:focus-visible {
-  outline: 2px solid var(--color-border);
-}
-
-slot[name="summary"] {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
-}
-
-.label {
-  flex: 1;
-}
-
-slot[name="expand"],
-slot[name="collapse"] {
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-slot[name="collapse"] {
-  display: none;
-}
-
-:host([open]) slot[name="expand"] {
-  display: none;
-}
-
-:host([open]) slot[name="collapse"] {
-  display: inline-flex;
-}
-
-.content-outer {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.25s ease;
-}
-
-:host([open]) .content-outer {
-  grid-template-rows: 1fr;
-}
-
-.content {
-  overflow: hidden;
-  padding: 0 14px;
-  transition: padding 0.25s ease;
-}
-
-:host([open]) .content {
-  padding: 12px 14px;
-}
-
+:host {
+  display: block;
+
+  --detail-bg:         var(--color-solid);
+  --detail-color:      var(--color-on-solid);
+  --detail-border:     var(--color-solid);
+  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);
+  --detail-radius:     6px;
+}
+
+:host([variant="faint"]) {
+  --detail-bg:         var(--color-bg-subtle);
+  --detail-color:      var(--color-text-subtle);
+  --detail-border:     var(--color-border-subtle);
+  --detail-header-bg:  var(--color-bg-subtle);
+}
+
+:host([variant="subtle"]) {
+  --detail-bg:         transparent;
+  --detail-color:      var(--color-text-main);
+  --detail-border:     transparent;
+  --detail-header-bg:  transparent;
+}
+
+:host([variant="filled"]) {
+  --detail-bg:         var(--color-solid);
+  --detail-color:      var(--color-on-solid);
+  --detail-border:     var(--color-solid);
+  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);
+}
+
+:host([variant="outlined"]) {
+  --detail-bg:         transparent;
+  --detail-color:      var(--color-text-subtle);
+  --detail-border:     var(--color-border);
+  --detail-header-bg:  transparent;
+}
+
+:host([disabled]) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.detail {
+  border: 1px solid var(--detail-border);
+  border-radius: var(--detail-radius);
+  color: var(--detail-color);
+  background: var(--detail-bg);
+  overflow: hidden;
+}
+
+.summary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 10px 14px;
+  background: var(--detail-header-bg);
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  outline-offset: -2px;
+  user-select: none;
+}
+
+.summary:hover {
+  filter: brightness(0.93);
+}
+
+.summary:focus-visible {
+  outline: 2px solid var(--color-border);
+}
+
+slot[name="summary"] {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+
+.label {
+  flex: 1;
+}
+
+slot[name="expand"],
+slot[name="collapse"] {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+slot[name="collapse"] {
+  display: none;
+}
+
+:host([open]) slot[name="expand"] {
+  display: none;
+}
+
+:host([open]) slot[name="collapse"] {
+  display: inline-flex;
+}
+
+.content-outer {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.25s ease;
+}
+
+:host([open]) .content-outer {
+  grid-template-rows: 1fr;
+}
+
+.content {
+  overflow: hidden;
+  padding: 0 14px;
+  transition: padding 0.25s ease;
+}
+
+:host([open]) .content {
+  padding: 12px 14px;
+}
+

package/src/styles/components/dialog.css

@@ -1,103 +1,103 @@
-:host {
-  display: contents;
-}
-
-dialog {
-  display: none;
-  flex-direction: column;
-  border: none;
-  border-radius: 8px;
-  padding: 0;
-  max-width: min(90vw, 600px);
-  max-height: 90vh;
-  background: var(--surface-overlay);
-  color: var(--color-text-main);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-  overflow: hidden;
-}
-
-dialog[open] {
-  display: flex;
-  animation: dialog-slide-in 0.2s ease;
-}
-
-dialog::backdrop {
-  background: var(--color-overlay);
-  animation: dialog-backdrop-in 0.2s ease;
-}
-
-@keyframes dialog-backdrop-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes dialog-slide-in {
-  from {
-    opacity: 0;
-    transform: scale(0.96) translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 16px 20px;
-  border-bottom: 1px solid var(--border-subtle);
-  flex-shrink: 0;
-}
-
-.label {
-  flex: 1;
-  font-size: var(--size-m, 1rem);
-  font-weight: 500;
-  margin: 0;
-  color: var(--color-text-main);
-}
-
-.close-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--color-text-muted);
-  font-size: 18px;
-  line-height: 1;
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-}
-
-.close-btn:hover {
-  background: var(--border-subtle);
-  color: var(--color-text-main);
-}
-
-.body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px;
-}
-
-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 20px;
-  border-top: 1px solid var(--border-subtle);
-  flex-shrink: 0;
-}
-
-::slotted([data-align-left]) {
-  margin-right: auto;
-}
+:host {
+  display: contents;
+}
+
+dialog {
+  display: none;
+  flex-direction: column;
+  border: none;
+  border-radius: 8px;
+  padding: 0;
+  max-width: min(90vw, 600px);
+  max-height: 90vh;
+  background: var(--surface-overlay);
+  color: var(--color-text-main);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+}
+
+dialog[open] {
+  display: flex;
+  animation: dialog-slide-in 0.2s ease;
+}
+
+dialog::backdrop {
+  background: var(--color-overlay);
+  animation: dialog-backdrop-in 0.2s ease;
+}
+
+@keyframes dialog-backdrop-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes dialog-slide-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.label {
+  flex: 1;
+  font-size: var(--size-m, 1rem);
+  font-weight: 500;
+  margin: 0;
+  color: var(--color-text-main);
+}
+
+.close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--color-text-muted);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.close-btn:hover {
+  background: var(--border-subtle);
+  color: var(--color-text-main);
+}
+
+.body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px;
+  border-top: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
+
+::slotted([data-align-left]) {
+  margin-right: auto;
+}

package/src/styles/components/divider.css

@@ -1,18 +1,18 @@
-:host {
-  display: block;
-  width: 100%;
-  height: var(--thickness, 1px);
-  flex-shrink: 0;
-
-  /* Override colorCSS default --color-border from gray to the subtle border token */
-  --color-border: var(--border-default);
-
-  background: var(--color-border);
-}
-
-:host([vertical]) {
-  display: inline-block;
-  width: var(--thickness, 1px);
-  height: 1lh;
-  vertical-align: middle;
-}
+:host {
+  display: block;
+  width: 100%;
+  height: var(--thickness, 1px);
+  flex-shrink: 0;
+
+  /* Override colorCSS default --color-border from gray to the subtle border token */
+  --color-border: var(--border-default);
+
+  background: var(--color-border);
+}
+
+:host([vertical]) {
+  display: inline-block;
+  width: var(--thickness, 1px);
+  height: 1lh;
+  vertical-align: middle;
+}