aeico-components 0.1.2 → 0.1.3

package/src/styles/components/button.css

@@ -1,213 +1,213 @@
-:host {
-  display: inline-block;
-  --btn-solid-bg:          var(--color-solid);
-  --btn-solid-bg-hover:    var(--color-solid-hover);
-  --btn-solid-bg-active:   var(--color-solid-active);
-  --btn-solid-color:       var(--color-on-solid);
-  --btn-solid-color-hover: var(--color-on-solid-hover);
-  --btn-border:            var(--color-border);
-  --btn-border-hover:      var(--color-border-hover);
-  --btn-accent:            var(--color-accent);
-  --btn-accent-hover:      var(--color-accent-hover);
-  --btn-subtle-bg:         var(--color-subtle);
-  --btn-subtle-bg-hover:   var(--color-subtle-hover);
-}
-
-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  font-family: inherit;
-  font-weight: 400;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  user-select: none;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-  outline: none;
-  position: relative;
-  padding: 0.429em 1.071em;
-  font-size: 1em;
-  line-height: 1.5;
-  border-radius: var(--_btn-r-tl, 4px) var(--_btn-r-tr, 4px) var(--_btn-r-br, 4px) var(--_btn-r-bl, 4px);
-  min-width: 4.571em;
-  height: 2.286em;
-  width: 100%;
-
-  background:   var(--btn-solid-bg);
-  border: 1px solid var(--btn-solid-bg);
-  color:        var(--btn-solid-color);
-}
-
-button:focus  { outline: none; }
-button:active { transform: translateY(1px); }
-
-button:hover:not(:disabled) {
-  background:   var(--btn-solid-bg-hover);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
-}
-
-button:active:not(:disabled) { background: var(--btn-solid-bg-active); }
-
-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-:host([size="xs"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
-:host([size="sm"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
-
-/* --- Variants --- */
-
-:host([variant="outlined"]) button {
-  background:   transparent;
-  border-color: var(--btn-border);
-  color:        var(--btn-accent);
-}
-
-:host([variant="outlined"]) button:hover:not(:disabled) {
-  background:   var(--btn-subtle-bg);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-accent-hover);
-}
-
-:host([variant="outlined"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
-}
-
-:host([variant="subtle"]) button {
-  background:   var(--btn-subtle-bg);
-  border-color: transparent;
-  color:        var(--btn-accent);
-}
-
-:host([variant="subtle"]) button:hover:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
-  color:      var(--btn-accent-hover);
-}
-
-:host([variant="subtle"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
-}
-
-:host([variant="faint"]) button {
-  background:   var(--btn-subtle-bg);
-  border-color: var(--btn-border);
-  color:        var(--btn-accent);
-}
-
-:host([variant="faint"]) button:hover:not(:disabled) {
-  background:   var(--btn-subtle-bg-hover);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-accent-hover);
-}
-
-:host([variant="faint"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
-}
-
-:host([variant="text"]) button {
-  background:   transparent;
-  border-color: transparent;
-  color:        var(--btn-accent);
-  min-width:     auto;
-  padding-left:  4px;
-  padding-right: 4px;
-}
-
-:host([variant="text"]) button:hover:not(:disabled) {
-  background: var(--btn-subtle-bg);
-  color:      var(--btn-accent-hover);
-}
-
-:host([variant="text"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
-}
-
-/* Icon-only: single ae-icon child → square compact layout */
-:host([icon-only]) {
-  display: inline-flex;
-}
-
-:host([icon-only]:not([size])) {
-  font-size: var(--size-m);
-}
-
-:host([icon-only]) button {
-  padding:   0;
-  min-width: auto;
-  width:     2.286em;
-  height:    2.286em;
-  line-height: 1;
-}
-
-:host([icon-only]) ::slotted(ae-icon) {
-  font-size: 1.5em;
-}
-
-:host([active]) button {
-  background:   var(--btn-solid-bg-active);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
-}
-
-.btn-icon {
-  padding: 0;
-  min-width: auto;
-  width: 2.286em;
-  height: 2.286em;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-}
-
-.btn-icon.btn-lg {
-  width: 2.857em;
-  height: 2.857em;
-}
-
-.btn-circle {
-  border-radius: 50%;
-}
-
-:host([block]) {
-  display: block;
-}
-
-button.btn-loading {
-  position: relative;
-  pointer-events: none;
-  color: transparent;
-}
-
-button.btn-loading::before {
-  content: '';
-  position: absolute;
-  width: 1em;
-  height: 1em;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: btn-spin 0.6s linear infinite;
-  color: currentColor;
-  opacity: 0.8;
-}
-
-@keyframes btn-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.btn-icon-left {
-  margin-right: -2px;
-}
-
-.btn-icon-right {
-  margin-left: -2px;
-}
-
+:host {
+  display: inline-block;
+  --btn-solid-bg:          var(--color-solid);
+  --btn-solid-bg-hover:    var(--color-solid-hover);
+  --btn-solid-bg-active:   var(--color-solid-active);
+  --btn-solid-color:       var(--color-on-solid);
+  --btn-solid-color-hover: var(--color-on-solid-hover);
+  --btn-border:            var(--color-border);
+  --btn-border-hover:      var(--color-border-hover);
+  --btn-accent:            var(--color-accent);
+  --btn-accent-hover:      var(--color-accent-hover);
+  --btn-subtle-bg:         var(--color-subtle);
+  --btn-subtle-bg-hover:   var(--color-subtle-hover);
+}
+
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-family: inherit;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  outline: none;
+  position: relative;
+  padding: 0.429em 1.071em;
+  font-size: 1em;
+  line-height: 1.5;
+  border-radius: var(--_btn-r-tl, 4px) var(--_btn-r-tr, 4px) var(--_btn-r-br, 4px) var(--_btn-r-bl, 4px);
+  min-width: 4.571em;
+  height: 2.286em;
+  width: 100%;
+
+  background:   var(--btn-solid-bg);
+  border: 1px solid var(--btn-solid-bg);
+  color:        var(--btn-solid-color);
+}
+
+button:focus  { outline: none; }
+button:active { transform: translateY(1px); }
+
+button:hover:not(:disabled) {
+  background:   var(--btn-solid-bg-hover);
+  border-color: var(--btn-border-hover);
+  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
+}
+
+button:active:not(:disabled) { background: var(--btn-solid-bg-active); }
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+:host([size="xs"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
+:host([size="sm"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
+
+/* --- Variants --- */
+
+:host([variant="outlined"]) button {
+  background:   transparent;
+  border-color: var(--btn-border);
+  color:        var(--btn-accent);
+}
+
+:host([variant="outlined"]) button:hover:not(:disabled) {
+  background:   var(--btn-subtle-bg);
+  border-color: var(--btn-border-hover);
+  color:        var(--btn-accent-hover);
+}
+
+:host([variant="outlined"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+
+:host([variant="subtle"]) button {
+  background:   var(--btn-subtle-bg);
+  border-color: transparent;
+  color:        var(--btn-accent);
+}
+
+:host([variant="subtle"]) button:hover:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+  color:      var(--btn-accent-hover);
+}
+
+:host([variant="subtle"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+
+:host([variant="faint"]) button {
+  background:   var(--btn-subtle-bg);
+  border-color: var(--btn-border);
+  color:        var(--btn-accent);
+}
+
+:host([variant="faint"]) button:hover:not(:disabled) {
+  background:   var(--btn-subtle-bg-hover);
+  border-color: var(--btn-border-hover);
+  color:        var(--btn-accent-hover);
+}
+
+:host([variant="faint"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+
+:host([variant="text"]) button {
+  background:   transparent;
+  border-color: transparent;
+  color:        var(--btn-accent);
+  min-width:     auto;
+  padding-left:  4px;
+  padding-right: 4px;
+}
+
+:host([variant="text"]) button:hover:not(:disabled) {
+  background: var(--btn-subtle-bg);
+  color:      var(--btn-accent-hover);
+}
+
+:host([variant="text"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+
+/* Icon-only: single ae-icon child → square compact layout */
+:host([icon-only]) {
+  display: inline-flex;
+}
+
+:host([icon-only]:not([size])) {
+  font-size: var(--size-m);
+}
+
+:host([icon-only]) button {
+  padding:   0;
+  min-width: auto;
+  width:     2.286em;
+  height:    2.286em;
+  line-height: 1;
+}
+
+:host([icon-only]) ::slotted(ae-icon) {
+  font-size: 1.5em;
+}
+
+:host([active]) button {
+  background:   var(--btn-solid-bg-active);
+  border-color: var(--btn-border-hover);
+  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
+}
+
+.btn-icon {
+  padding: 0;
+  min-width: auto;
+  width: 2.286em;
+  height: 2.286em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.btn-icon.btn-lg {
+  width: 2.857em;
+  height: 2.857em;
+}
+
+.btn-circle {
+  border-radius: 50%;
+}
+
+:host([block]) {
+  display: block;
+}
+
+button.btn-loading {
+  position: relative;
+  pointer-events: none;
+  color: transparent;
+}
+
+button.btn-loading::before {
+  content: '';
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: btn-spin 0.6s linear infinite;
+  color: currentColor;
+  opacity: 0.8;
+}
+
+@keyframes btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.btn-icon-left {
+  margin-right: -2px;
+}
+
+.btn-icon-right {
+  margin-left: -2px;
+}
+

package/src/styles/components/card.css

@@ -1,64 +1,64 @@
-:host {
-  display: block;
-
-  --card-bg:      var(--color-bg-subtle);
-  --card-color:   var(--color-text-subtle);
-  --card-border:  var(--color-border-subtle);
-  --card-divider: var(--color-border-subtle);
-}
-
-:host([variant="faint"]) {
-  --card-bg:      var(--color-bg-subtle);
-  --card-color:   var(--color-text-subtle);
-  --card-border:  var(--color-border-subtle);
-  --card-divider: var(--color-border-subtle);
-}
-
-:host([variant="subtle"]) {
-  --card-border:  transparent;
-  --card-divider: transparent;
-}
-
-:host([variant="filled"]) {
-  --card-bg:      var(--color-solid);
-  --card-color:   var(--color-on-solid);
-  --card-border:  var(--color-solid);
-  --card-divider: color-mix(in srgb, var(--color-solid), black 15%);
-}
-
-:host([variant="outlined"]) {
-  --card-bg:      transparent;
-  --card-color:   var(--color-text-subtle);
-  --card-border:  var(--color-border);
-  --card-divider: var(--color-border-subtle);
-}
-
-.card {
-  border: 1px solid var(--card-border);
-  border-radius: 8px;
-  background: var(--card-bg);
-  color: var(--card-color);
-  overflow: hidden;
-}
-
-.header,
-.footer {
-  display: none;
-  padding: 10px 16px;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-:host([has-header]) .header {
-  display: block;
-  border-bottom: 1px solid var(--card-divider);
-}
-
-:host([has-footer]) .footer {
-  display: block;
-  border-top: 1px solid var(--card-divider);
-}
-
-.body {
-  padding: 16px;
-}
+:host {
+  display: block;
+
+  --card-bg:      var(--color-bg-subtle);
+  --card-color:   var(--color-text-subtle);
+  --card-border:  var(--color-border-subtle);
+  --card-divider: var(--color-border-subtle);
+}
+
+:host([variant="faint"]) {
+  --card-bg:      var(--color-bg-subtle);
+  --card-color:   var(--color-text-subtle);
+  --card-border:  var(--color-border-subtle);
+  --card-divider: var(--color-border-subtle);
+}
+
+:host([variant="subtle"]) {
+  --card-border:  transparent;
+  --card-divider: transparent;
+}
+
+:host([variant="filled"]) {
+  --card-bg:      var(--color-solid);
+  --card-color:   var(--color-on-solid);
+  --card-border:  var(--color-solid);
+  --card-divider: color-mix(in srgb, var(--color-solid), black 15%);
+}
+
+:host([variant="outlined"]) {
+  --card-bg:      transparent;
+  --card-color:   var(--color-text-subtle);
+  --card-border:  var(--color-border);
+  --card-divider: var(--color-border-subtle);
+}
+
+.card {
+  border: 1px solid var(--card-border);
+  border-radius: 8px;
+  background: var(--card-bg);
+  color: var(--card-color);
+  overflow: hidden;
+}
+
+.header,
+.footer {
+  display: none;
+  padding: 10px 16px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+:host([has-header]) .header {
+  display: block;
+  border-bottom: 1px solid var(--card-divider);
+}
+
+:host([has-footer]) .footer {
+  display: block;
+  border-top: 1px solid var(--card-divider);
+}
+
+.body {
+  padding: 16px;
+}