aeico-components 0.1.2 → 0.1.4

package/src/styles/components/icon-button.css

@@ -1,116 +1,116 @@
-/* @deprecated – Use <ae-button> with <ae-icon> slot instead. */
-
-:host {
-  display: inline-flex;
-  font-size: var(--size-m);
-  --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;
-  padding: 0;
-  font-size: 1em;
-  cursor: pointer;
-  border-radius: 4px;
-  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-  outline: none;
-  user-select: none;
-  flex-shrink: 0;
-  width:  2.286em;
-  height: 2.286em;
-  --ib-icon-size: 1.286em;
-  background:  var(--btn-solid-bg);
-  border: 1px solid var(--btn-border);
-  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,
-:host([size="sm"]) button { border-radius: 3px; }
-
-: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="text"]) button {
-  background:   transparent;
-  border-color: transparent;
-  color:        var(--btn-accent);
-}
-
-: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-svg {
-  display: block;
-  width:  var(--ib-icon-size);
-  height: var(--ib-icon-size);
-  fill: var(--icon-fill, currentColor);
-  stroke: var(--icon-stroke, none);
-  stroke-width: var(--icon-stroke-width, 2);
-  stroke-linecap: var(--icon-stroke-linecap, round);
-  stroke-linejoin: var(--icon-stroke-linejoin, round);
-  pointer-events: none;
-  overflow: visible;
-  flex-shrink: 0;
-}
+/* @deprecated – Use <ae-button> with <ae-icon> slot instead. */
+
+:host {
+  display: inline-flex;
+  font-size: var(--size-m);
+  --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;
+  padding: 0;
+  font-size: 1em;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  outline: none;
+  user-select: none;
+  flex-shrink: 0;
+  width:  2.286em;
+  height: 2.286em;
+  --ib-icon-size: 1.286em;
+  background:  var(--btn-solid-bg);
+  border: 1px solid var(--btn-border);
+  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,
+:host([size="sm"]) button { border-radius: 3px; }
+
+: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="text"]) button {
+  background:   transparent;
+  border-color: transparent;
+  color:        var(--btn-accent);
+}
+
+: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-svg {
+  display: block;
+  width:  var(--ib-icon-size);
+  height: var(--ib-icon-size);
+  fill: var(--icon-fill, currentColor);
+  stroke: var(--icon-stroke, none);
+  stroke-width: var(--icon-stroke-width, 2);
+  stroke-linecap: var(--icon-stroke-linecap, round);
+  stroke-linejoin: var(--icon-stroke-linejoin, round);
+  pointer-events: none;
+  overflow: visible;
+  flex-shrink: 0;
+}

package/src/styles/components/icon.css

@@ -1,29 +1,29 @@
-:host {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  width:  1em;
-  height: 1em;
-  color: inherit;
-  flex-shrink: 0;
-  line-height: 0;
-  vertical-align: middle;
-}
-
-:host([color]) {
-  color: var(--color-solid);
-}
-
-.icon-svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-  fill: var(--icon-fill, currentColor);
-  stroke: var(--icon-stroke, none);
-  stroke-width: var(--icon-stroke-width, 2);
-  stroke-linecap: var(--icon-stroke-linecap, round);
-  stroke-linejoin: var(--icon-stroke-linejoin, round);
-  pointer-events: none;
-  overflow: visible;
-}
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  width:  1em;
+  height: 1em;
+  color: inherit;
+  flex-shrink: 0;
+  line-height: 0;
+  vertical-align: middle;
+}
+
+:host([color]) {
+  color: var(--color-solid);
+}
+
+.icon-svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: var(--icon-fill, currentColor);
+  stroke: var(--icon-stroke, none);
+  stroke-width: var(--icon-stroke-width, 2);
+  stroke-linecap: var(--icon-stroke-linecap, round);
+  stroke-linejoin: var(--icon-stroke-linejoin, round);
+  pointer-events: none;
+  overflow: visible;
+}