@haiilo/catalyst 10.32.0 → 10.32.2

package/dist/collection/components/cat-textarea/cat-textarea.css

@@ -49,6 +49,24 @@
   color: rgb(var(--cat-primary-text, 0, 129, 148)) !important;
 }
 
+button.cat-text-primary,
+button.cat-link-primary {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+button.cat-link-primary:hover:not(:disabled) {
+  text-decoration: var(--cat-link-decoration-hover, underline);
+}
+button.cat-link-primary:focus-visible {
+  outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
+  outline-offset: 1px;
+}
+
 .cat-link-primary,
 .cat-text-primary-hover {
   transition: color 125ms;
@@ -88,6 +106,24 @@
   color: #93b4f2 !important;
 }
 
+button.cat-text-primaryInverted,
+button.cat-link-primaryInverted {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+button.cat-link-primaryInverted:hover:not(:disabled) {
+  text-decoration: var(--cat-link-decoration-hover, underline);
+}
+button.cat-link-primaryInverted:focus-visible {
+  outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
+  outline-offset: 1px;
+}
+
 .cat-link-primaryInverted,
 .cat-text-primaryInverted-hover {
   transition: color 125ms;
@@ -127,6 +163,24 @@
   color: rgb(var(--cat-secondary-text, 0, 0, 0)) !important;
 }
 
+button.cat-text-secondary,
+button.cat-link-secondary {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+button.cat-link-secondary:hover:not(:disabled) {
+  text-decoration: var(--cat-link-decoration-hover, underline);
+}
+button.cat-link-secondary:focus-visible {
+  outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
+  outline-offset: 1px;
+}
+
 .cat-link-secondary,
 .cat-text-secondary-hover {
   transition: color 125ms;
@@ -166,6 +220,24 @@
   color: white !important;
 }
 
+button.cat-text-secondaryInverted,
+button.cat-link-secondaryInverted {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+button.cat-link-secondaryInverted:hover:not(:disabled) {
+  text-decoration: var(--cat-link-decoration-hover, underline);
+}
+button.cat-link-secondaryInverted:focus-visible {
+  outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
+  outline-offset: 1px;
+}
+
 .cat-link-secondaryInverted,
 .cat-text-secondaryInverted-hover {
   transition: color 125ms;
@@ -205,6 +277,24 @@
   color: rgb(var(--cat-info-text, 0, 115, 230)) !important;
 }
 
+button.cat-text-info,
+button.cat-link-info {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+button.cat-link-info:hover:not(:disabled) {
+  text-decoration: var(--cat-link-decoration-hover, underline);
+}
+button.cat-link-info:focus-visible {
+  outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
+  outline-offset: 1px;
+}
+
 .cat-link-info,
 .cat-text-info-hover {
   transition: color 125ms;
@@ -244,6 +334,24 @@
   color: rgb(var(--cat-success-text, 0, 132, 88)) !important;
 }
 
+button.cat-text-success,
+button.cat-link-success {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+button.cat-link-success:hover:not(:disabled) {
+  text-decoration: var(--cat-link-decoration-hover, underline);
+}
+button.cat-link-success:focus-visible {
+  outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
+  outline-offset: 1px;
+}
+
 .cat-link-success,
 .cat-text-success-hover {
   transition: color 125ms;
@@ -283,6 +391,24 @@
   color: rgb(var(--cat-warning-text, 159, 97, 0)) !important;
 }
 
+button.cat-text-warning,
+button.cat-link-warning {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+button.cat-link-warning:hover:not(:disabled) {
+  text-decoration: var(--cat-link-decoration-hover, underline);
+}
+button.cat-link-warning:focus-visible {
+  outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
+  outline-offset: 1px;
+}
+
 .cat-link-warning,
 .cat-text-warning-hover {
   transition: color 125ms;
@@ -322,6 +448,24 @@
   color: rgb(var(--cat-danger-text, 217, 52, 13)) !important;
 }
 
+button.cat-text-danger,
+button.cat-link-danger {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+button.cat-link-danger:hover:not(:disabled) {
+  text-decoration: var(--cat-link-decoration-hover, underline);
+}
+button.cat-link-danger:focus-visible {
+  outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
+  outline-offset: 1px;
+}
+
 .cat-link-danger,
 .cat-text-danger-hover {
   transition: color 125ms;

package/dist/collection/scss/utils/_color.scss

@@ -32,6 +32,27 @@
     color: cat-token('color.theme.#{$name}.text') !important;
   }
 
+  button.cat-text-#{$name},
+  button.cat-link-#{$name} {
+    margin: 0;
+    padding: 0;
+    font: inherit;
+    border: none;
+    background: none;
+    cursor: pointer;
+  }
+
+  button.cat-link-#{$name} {
+    &:hover:not(:disabled) {
+      text-decoration: cat-token('font.decoration.linkHover');
+    }
+
+    &:focus-visible {
+      outline: 2px solid cat-token('color.ui.border.focus');
+      outline-offset: 1px;
+    }
+  }
+
   .cat-link-#{$name},
   .cat-text-#{$name}-hover {
     transition: color cat-token('time.transition.s');

package/dist/components/cat-card.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-const catCardCss = ":host{display:block;border-radius:var(--cat-border-radius-l, 0.5rem);background-color:white;padding:1.25rem;box-shadow:0 0 0 1px rgb(var(--cat-border-color-card, 140, 140, 140, 0.12))}:host([hidden]){display:none}::slotted(:last-child){margin-bottom:0 !important}::slotted(nav),::slotted(nav:last-child){margin:-1rem -1rem !important}::slotted(.cat-card-pull){margin:-1.25rem !important;width:calc(100% + 2.5rem) !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-h){margin-left:-1.25rem !important;margin-right:-1.25rem !important;width:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-v){margin-top:-1.25rem !important;margin-bottom:-1.25rem !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-t){margin-top:-1.25rem !important}::slotted(.cat-card-pull-l){margin-left:-1.25rem !important}::slotted(.cat-card-pull-r){margin-right:-1.25rem !important}::slotted(.cat-card-pull-b){margin-bottom:-1.25rem !important}";
+const catCardCss = ":host{display:block;border-radius:var(--cat-border-radius-l, 0.5rem);background-color:white;padding:1.25rem;box-shadow:0 0 0 1px rgb(var(--cat-border-color-card, 0, 0, 0, 0))}:host([hidden]){display:none}::slotted(:last-child){margin-bottom:0 !important}::slotted(nav),::slotted(nav:last-child){margin:-1rem -1rem !important}::slotted(.cat-card-pull){margin:-1.25rem !important;width:calc(100% + 2.5rem) !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-h){margin-left:-1.25rem !important;margin-right:-1.25rem !important;width:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-v){margin-top:-1.25rem !important;margin-bottom:-1.25rem !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-t){margin-top:-1.25rem !important}::slotted(.cat-card-pull-l){margin-left:-1.25rem !important}::slotted(.cat-card-pull-r){margin-right:-1.25rem !important}::slotted(.cat-card-pull-b){margin-bottom:-1.25rem !important}";
 const CatCardStyle0 = catCardCss;
 
 const CatCard$1 = /*@__PURE__*/ proxyCustomElement(class CatCard extends HTMLElement {

package/dist/components/cat-card.js.map

@@ -1 +1 @@
-{"file":"cat-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,u8BAAu8B,CAAC;AAC39B,sBAAe,UAAU;;MCUZA,SAAO;;;;;;;IAMlB,MAAM;QACJ,OAAO,8DAAa,CAAC;KACtB;IAED,gBAAgB;QACd,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;KACrB;;;;;;;;;;;;;;;;;;;;;;","names":["CatCard"],"sources":["src/components/cat-card/cat-card.scss?tag=cat-card&encapsulation=shadow","src/components/cat-card/cat-card.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n$-padding: 1.25rem;\n\n:host {\n  display: block;\n  border-radius: cat-border-radius('l');\n  background-color: cat-token('color.ui.background.surface');\n  padding: $-padding;\n  @include cat-elevation-card;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n::slotted(nav),\n::slotted(nav:last-child) {\n  margin: #{0.25rem - $-padding} #{0.25rem - $-padding} !important;\n}\n\n// --- pull out helper classes\n\n::slotted(.cat-card-pull) {\n  margin: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-h) {\n  margin-left: -$-padding !important;\n  margin-right: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-v) {\n  margin-top: -$-padding !important;\n  margin-bottom: -$-padding !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-t) {\n  margin-top: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-l) {\n  margin-left: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-r) {\n  margin-right: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-b) {\n  margin-bottom: -$-padding !important;\n}\n","import { Component, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * Cards are surfaces that display content and actions on a single topic. They\n * should be easy to scan for relevant and actionable information.\n */\n@Component({\n  tag: 'cat-card',\n  styleUrl: 'cat-card.scss',\n  shadow: true\n})\nexport class CatCard {\n  /**\n   * Emitted when the card and all the children are fully loaded.\n   */\n  @Event() catLoad!: EventEmitter<FocusEvent>;\n\n  render() {\n    return <slot></slot>;\n  }\n\n  componentDidLoad() {\n    this.catLoad.emit();\n  }\n}\n"],"version":3}
+{"file":"cat-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,87BAA87B,CAAC;AACl9B,sBAAe,UAAU;;MCUZA,SAAO;;;;;;;IAMlB,MAAM;QACJ,OAAO,8DAAa,CAAC;KACtB;IAED,gBAAgB;QACd,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;KACrB;;;;;;;;;;;;;;;;;;;;;;","names":["CatCard"],"sources":["src/components/cat-card/cat-card.scss?tag=cat-card&encapsulation=shadow","src/components/cat-card/cat-card.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n$-padding: 1.25rem;\n\n:host {\n  display: block;\n  border-radius: cat-border-radius('l');\n  background-color: cat-token('color.ui.background.surface');\n  padding: $-padding;\n  @include cat-elevation-card;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n::slotted(nav),\n::slotted(nav:last-child) {\n  margin: #{0.25rem - $-padding} #{0.25rem - $-padding} !important;\n}\n\n// --- pull out helper classes\n\n::slotted(.cat-card-pull) {\n  margin: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-h) {\n  margin-left: -$-padding !important;\n  margin-right: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-v) {\n  margin-top: -$-padding !important;\n  margin-bottom: -$-padding !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-t) {\n  margin-top: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-l) {\n  margin-left: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-r) {\n  margin-right: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-b) {\n  margin-bottom: -$-padding !important;\n}\n","import { Component, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * Cards are surfaces that display content and actions on a single topic. They\n * should be easy to scan for relevant and actionable information.\n */\n@Component({\n  tag: 'cat-card',\n  styleUrl: 'cat-card.scss',\n  shadow: true\n})\nexport class CatCard {\n  /**\n   * Emitted when the card and all the children are fully loaded.\n   */\n  @Event() catLoad!: EventEmitter<FocusEvent>;\n\n  render() {\n    return <slot></slot>;\n  }\n\n  componentDidLoad() {\n    this.catLoad.emit();\n  }\n}\n"],"version":3}