@x-plat/design-system 0.7.1 → 0.8.0

package/dist/components/index.css

@@ -1450,7 +1450,7 @@
   overflow: hidden;
   background-color: var(--semantic-surface-neutral-primary);
   width: 100%;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:hover:not(.disabled):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);
@@ -1458,6 +1458,8 @@
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:focus-within {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);
@@ -1719,7 +1721,8 @@
   font-weight: var(--semantic-typo-label-1-m-weight);
   letter-spacing: var(--semantic-typo-label-1-m-ls);
 }
-.lib-xplat-button:disabled {
+.lib-xplat-button:disabled,
+.lib-xplat-button.disabled {
   cursor: not-allowed;
   background-color: var(--semantic-surface-neutral-disabled) !important;
   border-color: var(--semantic-surface-neutral-disabled) !important;
@@ -2392,7 +2395,7 @@
   border: 1px solid var(--semantic-border-primary);
   border-radius: var(--spacing-radius-lg);
   background-color: var(--semantic-surface-neutral-primary);
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-chat-input:hover:not(.disabled):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);
@@ -2400,6 +2403,8 @@
 .lib-xplat-chat-input:focus-within {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .lib-xplat-chat-input.disabled {
   background-color: var(--semantic-surface-neutral-secondary);
@@ -2624,7 +2629,7 @@
   background-color: var(--semantic-surface-neutral-primary);
   padding-right: var(--spacing-space-2);
   width: 100%;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-input-wrap .lib-xplat-input:hover:not(.disabled):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);
@@ -2632,6 +2637,8 @@
 .lib-xplat-input-wrap .lib-xplat-input:focus-within {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .lib-xplat-input-wrap .lib-xplat-input:has(> input:not(:placeholder-shown)):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);
@@ -3802,6 +3809,32 @@
   cursor: pointer;
 }
 
+/* src/components/Link/link.scss */
+.lib-xplat-link {
+  color: var(--semantic-text-link);
+  cursor: pointer;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+  border-radius: var(--spacing-radius-sm);
+  transition: text-decoration-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.lib-xplat-link.underline-always {
+  text-decoration: underline;
+}
+.lib-xplat-link.underline-hover {
+  text-decoration: none;
+}
+.lib-xplat-link.underline-hover:hover {
+  text-decoration: underline;
+}
+.lib-xplat-link.underline-none {
+  text-decoration: none;
+}
+.lib-xplat-link:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}
+
 /* src/components/NotificationBadge/notificationBadge.scss */
 .lib-xplat-notification-badge {
   position: relative;
@@ -4237,7 +4270,7 @@
   border-radius: var(--spacing-radius-md);
   background-color: var(--semantic-surface-neutral-primary);
   color: var(--semantic-text-primary);
-  transition: border-color 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-select .select-trigger:hover:not(.disabled) {
   border-color: var(--semantic-border-tertiary);
@@ -4246,7 +4279,9 @@
   border-color: var(--semantic-interaction-focus-ring);
 }
 .lib-xplat-select .select-trigger:focus-visible {
-  outline: 2px solid var(--semantic-interaction-focus-ring);
+  border-color: var(--semantic-interaction-focus-ring);
+  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+  outline: 2px solid transparent;
   outline-offset: 2px;
 }
 .lib-xplat-select .select-trigger.disabled {
@@ -5197,7 +5232,7 @@
   color: var(--semantic-text-secondary);
   font-family: inherit;
   outline: none;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea.sm {
   padding: var(--spacing-space-2) var(--spacing-space-3);
@@ -5229,6 +5264,8 @@
 .lib-xplat-textarea-wrap .lib-xplat-textarea:focus {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .lib-xplat-textarea-wrap .lib-xplat-textarea:not(:placeholder-shown):not(:focus) {
   border-color: var(--semantic-border-tertiary);

package/dist/components/index.d.cts

@@ -22,6 +22,8 @@ export { HtmlTypeWriter, HtmlTypeWriter as HtmlTypewriter } from './HtmlTypeWrit
 export { IconButton } from './IconButton/index.cjs';
 export { ImageSelector } from './ImageSelector/index.cjs';
 export { Input, PasswordInput } from './Input/index.cjs';
+export { Link } from './Link/index.cjs';
+export { LinkButton } from './LinkButton/index.cjs';
 export { Modal } from './Modal/index.cjs';
 export { NotificationBadge as Badge, NotificationBadge } from './NotificationBadge/index.cjs';
 export { Pagination } from './Pagination/index.cjs';

package/dist/components/index.d.ts

@@ -22,6 +22,8 @@ export { HtmlTypeWriter, HtmlTypeWriter as HtmlTypewriter } from './HtmlTypeWrit
 export { IconButton } from './IconButton/index.js';
 export { ImageSelector } from './ImageSelector/index.js';
 export { Input, PasswordInput } from './Input/index.js';
+export { Link } from './Link/index.js';
+export { LinkButton } from './LinkButton/index.js';
 export { Modal } from './Modal/index.js';
 export { NotificationBadge as Badge, NotificationBadge } from './NotificationBadge/index.js';
 export { Pagination } from './Pagination/index.js';