@sky.ui/core 0.0.1

package/dist/sky-alert/sky-alert.js

@@ -0,0 +1,292 @@
+import{__decorate as t,__metadata as e}from"tslib";import{LitElement as r,css as i,html as o}from"lit";import{property as s,state as n,customElement as a}from"lit/decorators.js";import{styleMap as l}from"lit/directives/style-map.js";import{classMap as p}from"lit/directives/class-map.js";import{when as d}from"lit/directives/when.js";import{resolveRadius as c}from"../helper/utils/size-resolver.js";import{resolveColor as h,resolveTextColorForToken as g,tuneSurfaceVariantForDefaultColor as y,isDefaultColorToken as m,hoverShade as v,fadeMix as u}from"../helper/utils/color-resolver.js";import{SkyIcon as b}from"../sky-icon/sky-icon.js";let f=class extends r{constructor(){super(...arguments),this.title="",this.message="",this.removable=!1,this.color="primary",this.size="md",this.radius="md",this.icon=null,this.strip="none",this.stripColor="currentColor",this.variant="solid",this.loading=!1,this.roleType="alert",this._styleVars={},this._sizeCache=null,this._hasActionsSlotContent=!1}static{this.dependencies={"sky-icon":b}}static{this.styles=i`
+    :host {
+      display: block;
+      font-family: var(--sky-font);
+      width: 100%;
+    }
+
+    .alert {
+      position: relative;
+      width: 100%;
+      box-sizing: border-box;
+      display: flex;
+      align-items: stretch;
+      gap: var(--alert-gap, var(--sky-space-2, 8px));
+      padding: var(--alert-padding);
+      border-radius: var(--alert-radius);
+      border: var(--alert-border, none);
+      color: var(--alert-color, var(--sky-text-primary));
+      background-color: var(--alert-bg, transparent);
+      transition: background-color var(--sky-duration-slow, 300ms) var(--sky-ease-default, ease),
+        color var(--sky-duration-slow, 300ms) var(--sky-ease-default, ease),
+        border-color var(--sky-duration-slow, 300ms) var(--sky-ease-default, ease);
+      min-height: var(--alert-min-height, 36px);
+      animation: skyc-fade-in var(--sky-duration-fast, 120ms) var(--sky-ease-out, ease-out);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .alert {
+        animation: none;
+        transition: none;
+      }
+    }
+
+    /* Strip styles (logical properties for RTL) */
+    .alert.strip-start::before,
+    .alert.strip-end::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: var(--strip-width, 4px);
+      background: var(--strip-color, currentColor);
+      z-index: 1;
+    }
+
+    .alert.strip-start::before {
+      inset-inline-start: 0;
+      border-start-start-radius: inherit;
+      border-end-start-radius: inherit;
+    }
+
+    .alert.strip-end::after {
+      inset-inline-end: 0;
+      border-start-end-radius: inherit;
+      border-end-end-radius: inherit;
+    }
+
+    .alert.strip-start {
+      border-start-start-radius: 0 !important;
+      border-end-start-radius: 0 !important;
+    }
+    .alert.strip-end {
+      border-start-end-radius: 0 !important;
+      border-end-end-radius: 0 !important;
+    }
+
+    .alert.strip-start.strip-end {
+      border-radius: 0 !important;
+    }
+
+    /* Remove borders on strip sides */
+    .alert.strip-start.bordered {
+      border-inline-start: none !important;
+    }
+    .alert.strip-end.bordered {
+      border-inline-end: none !important;
+    }
+    .alert.strip-start.strip-end.bordered {
+      border-inline-start: none !important;
+      border-inline-end: none !important;
+    }
+
+    .alert.faded.strip-start {
+      border-inline-start: none !important;
+    }
+    .alert.faded.strip-end {
+      border-inline-end: none !important;
+    }
+    .alert.faded.strip-start.strip-end {
+      border-inline-start: none !important;
+      border-inline-end: none !important;
+    }
+
+    .icon {
+      align-self: flex-start;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--icon-size, 20px);
+      color: inherit;
+      flex-shrink: 0;
+      padding-block-start: 2px;
+    }
+
+    .content {
+      flex: 1 1 auto;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .title {
+      font-size: var(--title-font-size, var(--sky-font-size-md, 1rem));
+      font-weight: var(--sky-font-weight-bold, 700);
+      line-height: var(--sky-line-height-tight, 1.2);
+      letter-spacing: var(--sky-letter-spacing-normal, 0);
+      font-family: var(--sky-font);
+      color: inherit;
+      margin: 0 0 var(--sky-space-1, 4px) 0;
+    }
+
+    .message {
+      margin: 0;
+      text-align: start;
+      font-size: var(--message-font-size, var(--sky-font-size-sm, 0.875rem));
+      line-height: var(--sky-line-height-normal, 1.5);
+      letter-spacing: var(--sky-letter-spacing-normal, 0);
+      font-family: var(--sky-font);
+      color: inherit;
+    }
+
+    ::slotted(*) {
+      font-size: var(--message-font-size, var(--sky-font-size-sm, 0.875rem));
+      line-height: var(--sky-line-height-normal, 1.5);
+    }
+
+    .actions {
+      display: inline-flex;
+      gap: var(--sky-space-2, 8px);
+      align-items: center;
+      justify-content: flex-end;
+      flex: 0 0 auto;
+      align-self: stretch;
+      border-inline-start: 1px solid var(--sky-border-light, rgba(0, 0, 0, 0.15));
+      padding-inline-start: var(--sky-space-2, 8px);
+      margin-inline-start: var(--sky-space-1, 4px);
+    }
+
+    .actions-slot-placeholder {
+      position: absolute;
+      width: 0;
+      height: 0;
+      overflow: hidden;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .close-button {
+      margin-inline-start: var(--sky-space-1.5, 6px);
+      display: inline-flex;
+      aspect-ratio: 1 / 1;
+      justify-content: center;
+      align-items: center;
+      width: var(--close-size, 24px);
+      height: var(--close-size, 24px);
+      box-sizing: border-box;
+      background: var(--close-bg, var(--sky-hover-primary));
+      border: none;
+      border-radius: var(--sky-radius-full, 50%);
+      font-size: var(--close-font-size, 16px);
+      cursor: pointer;
+      font-weight: var(--sky-font-weight-bold, 700);
+      color: var(--close-color, currentColor);
+      transition: transform var(--sky-duration-normal, 200ms) var(--sky-ease-default, ease),
+        background-color var(--sky-duration-normal, 200ms) var(--sky-ease-default, ease),
+        color var(--sky-duration-normal, 200ms) var(--sky-ease-default, ease);
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .close-button:hover {
+      transform: rotate(90deg);
+      background: var(--close-hover-bg, var(--sky-hover-secondary));
+      color: var(--close-hover-color, currentColor);
+    }
+
+    .close-button:focus-visible {
+      outline: none;
+      box-shadow: var(--sky-focus-ring);
+      background: var(--close-hover-bg, var(--sky-hover-secondary));
+      color: var(--close-hover-color, currentColor);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .close-button {
+        transition: none;
+      }
+      .close-button:hover,
+      .close-button:focus-visible {
+        transform: none;
+      }
+    }
+
+    .loading-overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--sky-overlay-primary);
+      border-radius: inherit;
+      backdrop-filter: var(--sky-blur-primary);
+      z-index: 2;
+     
+    }
+
+    .loading-spinner {
+      width: var(--spinner-size, 16px);
+      height: var(--spinner-size, 16px);
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: var(--sky-radius-full, 50%);
+      animation: skyc-spin 0.8s linear infinite;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .loading-spinner {
+        animation: none;
+      }
+    }
+
+    @keyframes skyc-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes skyc-fade-in {
+      from {
+        opacity: 0;
+        transform: translateY(-2px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  `}_resolveSize(t){const e=String(t).trim();if(this._sizeCache&&this._sizeCache.size===e)return this._sizeCache.result;const r={xs:{padding:"3px 7px",titleFontSize:"12px",messageFontSize:"11px",gap:"4px",icon:"14px",closeSize:"18px",closeFontSize:"12px",spinner:"12px",stripWidth:"2px",minHeight:"28px"},sm:{padding:"5px 9px",titleFontSize:"14px",messageFontSize:"13px",gap:"6px",icon:"16px",closeSize:"20px",closeFontSize:"14px",spinner:"14px",stripWidth:"3px",minHeight:"32px"},md:{padding:"8px 12px",titleFontSize:"16px",messageFontSize:"14px",gap:"8px",icon:"20px",closeSize:"24px",closeFontSize:"16px",spinner:"16px",stripWidth:"4px",minHeight:"36px"},lg:{padding:"10px 14px",titleFontSize:"18px",messageFontSize:"15px",gap:"10px",icon:"22px",closeSize:"28px",closeFontSize:"18px",spinner:"18px",stripWidth:"5px",minHeight:"40px"},xl:{padding:"12px 16px",titleFontSize:"20px",messageFontSize:"16px",gap:"12px",icon:"24px",closeSize:"32px",closeFontSize:"20px",spinner:"20px",stripWidth:"6px",minHeight:"44px"}};if(r[t])return this._sizeCache={size:e,result:r[t]},r[t];const i=String(t).trim().match(/^([\d.]+)(px|rem|em)?$/i),o=i?.[2]||"px",s=i?parseFloat(i[1]):16,n=t=>`${Math.round(100*t)/100}${o}`,a=(t,e,r)=>Math.max(e,Math.min(r,t)),l=`${s}${o}`,p=a(.875*s,11,16),d=a(.5*s,3,12),c=a(.75*s,7,16),h=a(.5*s,4,12),g=a(1.25*s,14,24),y=a(1.5*s,18,32),m=a(1*s,12,20),v=a(1*s,12,20),u=a(.25*s,2,6),b=a(2.25*s,28,44);return{padding:`${n(d)} ${n(c)}`,titleFontSize:l,messageFontSize:n(p),gap:n(h),icon:n(g),closeSize:n(y),closeFontSize:n(m),spinner:n(v),stripWidth:n(u),minHeight:n(b)}}willUpdate(t){super.willUpdate(t),(t.has("color")||t.has("variant")||t.has("stripColor")||t.has("radius")||t.has("size"))&&this._updateStyleVars()}firstUpdated(){queueMicrotask(()=>this._checkActionsSlot())}_updateStyleVars(){const t=h(this.color),e=g(this.color),r="currentColor"===this.stripColor?t:h(this.stripColor),i=this._resolveSize(this.size),o={solid:{bg:t,color:e,border:"none"},flat:{bg:u(t,20),color:v(t,30),border:"none"},faded:{bg:"var(--sky-hover-tertiary)",color:t,border:"1px solid var(--sky-text-tertiary)"},bordered:{bg:"transparent",color:t,border:`2px solid ${t}`},light:{bg:"transparent",color:t,border:"none"}},s=this.variant in o?this.variant:"flat",n=y(this.color,s,o[s]);let a="var(--sky-hover-primary)",l="currentColor",p="var(--sky-hover-secondary)",d="currentColor";"solid"===s?(a=u(e,20),l=e,p=u(e,30),d=e):"flat"!==s&&"faded"!==s||(m(this.color)?(a="var(--sky-hover-tertiary)",l=n.color,p="var(--sky-hover-secondary)",d=n.color):(a=u(t,15),l=n.color,p=u(t,25),d=n.color)),this._styleVars={"--alert-bg":n.bg,"--alert-color":n.color,"--alert-border":n.border,"--alert-radius":c(this.radius),"--alert-padding":i.padding,"--alert-gap":i.gap,"--alert-min-height":i.minHeight,"--title-font-size":i.titleFontSize,"--message-font-size":i.messageFontSize,"--icon-size":i.icon,"--close-size":i.closeSize,"--close-font-size":i.closeFontSize,"--spinner-size":i.spinner,"--strip-color":r,"--strip-width":i.stripWidth,"--close-bg":a,"--close-color":l,"--close-hover-bg":p,"--close-hover-color":d}}close(){const t=new CustomEvent("alert-closed",{detail:{title:this.title,message:this.message},bubbles:!0,composed:!0});this.dispatchEvent(t),this.remove()}getAriaRole(){return this.roleType}_checkActionsSlot(){const t=this.renderRoot?.querySelector('slot[name="actions"]');if(!t)return;const e=t.assignedNodes({flatten:!0}).some(t=>t.nodeType!==Node.TEXT_NODE||(t.textContent?.trim().length??0)>0);e!==this._hasActionsSlotContent&&(this._hasActionsSlotContent=e)}_onActionsSlotChange(t){const e=t.target.assignedNodes({flatten:!0}).some(t=>t.nodeType!==Node.TEXT_NODE||(t.textContent?.trim().length??0)>0);this._hasActionsSlotContent=e}render(){const t=this.getAriaRole(),e=p({alert:!0,[this.variant]:!0,"strip-start":"start"===this.strip||"both"===this.strip,"strip-end":"end"===this.strip||"both"===this.strip});return o`
+      <div
+        part="alert"
+        class=${e}
+        role="${t}"
+        aria-live="${"alert"===this.roleType?"assertive":"polite"}"
+        style=${l(this._styleVars)}
+      >
+        ${d(this.icon,()=>o`<sky-icon part="icon" class="icon" icon="${this.icon}"></sky-icon>`)}
+
+        <div part="content" class="content">
+          ${d(this.title,()=>o`<div part="title" class="title">${this.title}</div>`)}
+          ${d(this.message,()=>o`<p part="message" class="message">${this.message}</p>`,()=>o`<slot></slot>`)}
+        </div>
+
+        ${d(this._hasActionsSlotContent||this.removable,()=>o`
+            <div part="actions" class="actions">
+              <slot name="actions" @slotchange=${this._onActionsSlotChange}></slot>
+              ${d(this.removable,()=>o`
+                  <button
+                    part="close-button"
+                    class="close-button"
+                    type="button"
+                    @click=${this.close}
+                    aria-label="Dismiss alert"
+                    title="Dismiss"
+                  >
+                    <sky-icon icon="ion:close"></sky-icon>
+                  </button>
+                `)}
+            </div>
+          `,()=>o`
+            <div class="actions-slot-placeholder" aria-hidden="true">
+              <slot name="actions" @slotchange=${this._onActionsSlotChange}></slot>
+            </div>
+          `)}
+
+        ${d(this.loading,()=>o`
+            <div part="loading-overlay" class="loading-overlay">
+              <div part="loading-spinner" class="loading-spinner"></div>
+            </div>
+          `)}
+      </div>
+    `}};t([s({type:String}),e("design:type",String)],f.prototype,"title",void 0),t([s({type:String}),e("design:type",String)],f.prototype,"message",void 0),t([s({type:Boolean}),e("design:type",Boolean)],f.prototype,"removable",void 0),t([s({type:String}),e("design:type",String)],f.prototype,"color",void 0),t([s({type:String}),e("design:type",String)],f.prototype,"size",void 0),t([s({type:String}),e("design:type",String)],f.prototype,"radius",void 0),t([s({type:String}),e("design:type",Object)],f.prototype,"icon",void 0),t([s({type:String,reflect:!0}),e("design:type",String)],f.prototype,"strip",void 0),t([s({type:String}),e("design:type",String)],f.prototype,"stripColor",void 0),t([s({type:String,reflect:!0}),e("design:type",String)],f.prototype,"variant",void 0),t([s({type:Boolean}),e("design:type",Boolean)],f.prototype,"loading",void 0),t([s({type:String,reflect:!0}),e("design:type",String)],f.prototype,"roleType",void 0),t([n(),e("design:type",Object)],f.prototype,"_hasActionsSlotContent",void 0),f=t([a("sky-alert")],f);export{f as SkyAlert};
+//# sourceMappingURL=sky-alert.js.map

package/dist/sky-alert/sky-alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sky-alert.js","sources":["../../src/sky-alert/sky-alert.ts"],"sourcesContent":[null],"names":["SkyAlert","LitElement","constructor","this","title","message","removable","color","size","radius","icon","strip","stripColor","variant","loading","roleType","_styleVars","_sizeCache","_hasActionsSlotContent","dependencies","SkyIcon","styles","css","_resolveSize","input","key","String","trim","result","presets","xs","padding","titleFontSize","messageFontSize","gap","closeSize","closeFontSize","spinner","stripWidth","minHeight","sm","md","lg","xl","m","match","unit","fsNum","parseFloat","to","n","Math","round","clamp","min","max","titleFs","messageFs","py","px","closeFont","willUpdate","changedProperties","super","has","_updateStyleVars","firstUpdated","queueMicrotask","_checkActionsSlot","baseColor","resolveColor","textColor","resolveTextColorForToken","stripColorResolved","s","variantStyles","solid","bg","border","flat","fadeMix","hoverShade","faded","bordered","light","currentVariant","v","tuneSurfaceVariantForDefaultColor","closeBg","closeColor","closeHoverBg","closeHoverColor","isDefaultColorToken","resolveRadius","close","evt","CustomEvent","detail","bubbles","composed","dispatchEvent","remove","getAriaRole","slot","renderRoot","querySelector","hasContent","assignedNodes","flatten","some","nodeType","Node","TEXT_NODE","textContent","length","_onActionsSlotChange","e","target","render","roleAttr","alertClasses","classMap","alert","html","styleMap","when","__decorate","property","type","prototype","Boolean","reflect","state","customElement"],"mappings":"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"}

package/dist/sky-appbar/index.d.ts

@@ -0,0 +1 @@
+export * from "./sky-appbar";

package/dist/sky-appbar/index.js

@@ -0,0 +1 @@
+export * from './sky-appbar.js';

package/dist/sky-appbar/sky-appbar.d.ts

@@ -0,0 +1,84 @@
+import { LitElement, PropertyValues } from "lit";
+/**
+ * @element sky-appbar
+ *
+ * @summary Application top bar with title, optional leading control, trailing actions, and optional color/image background.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/appbar
+ * @dependency sky-icon
+ *
+ * @slot button - Leading area (e.g., menu/back button). Defaults to a hamburger icon.
+ * @slot - Trailing actions (icons/buttons). This is the default slot.
+ *
+ * @property {string} title - Title text displayed in the app bar.
+ * @property {string} color - Semantic token or CSS color for bar background; foreground color is derived for contrast.
+ * @property {string} url - Background image URL.
+ * @property {boolean} banner - Uses `role="banner"` when true, otherwise `role="group"`.
+ * @property {boolean} dense - Enables compact vertical spacing.
+ * @property {boolean} elevated - Applies elevated shadow styling.
+ * @property {string} leadingLabel - Accessible label for default leading button fallback.
+ *
+ * @csspart content - Wrapper that contains the leading slot, title, and actions.
+ * @csspart leading - Container for the leading slot (e.g. menu button).
+ * @csspart title - The title area (contains .title-text with the title string).
+ * @csspart actions - The trailing actions container.
+ *
+ * @Behavior
+ * - `color` resolves background via `resolveColor()` and text/icon color via `resolveTextColorForToken()`.
+ * - `url` renders a background layer behind content.
+ * - `banner` should be true only for the primary page app bar landmark.
+ * - In RTL contexts, the default leading icon is mirrored unless reduced motion is enabled.
+ *
+ * @example
+ * ```html
+ * <sky-appbar title="Dashboard" color="primary" dense>
+ *   <button slot="button">Menu</button>
+ *   <sky-icon icon="ion:search"></sky-icon>
+ * </sky-appbar>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-appbar title="Dashboard" color="primary" dense>
+ *     <button slot="button">Menu</button>
+ *     <sky-icon icon="ion:search"></sky-icon>
+ *   </sky-appbar>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <sky-appbar title="Dashboard" color="primary" dense>
+ *       <button slot="button">Menu</button>
+ *       <sky-icon icon="ion:search"></sky-icon>
+ *     </sky-appbar>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkyAppbar extends LitElement {
+    static dependencies: Record<string, CustomElementConstructor>;
+    /** Title text displayed in the app bar. @default "App Bar" */
+    title: string;
+    /**
+     * Bar background token or CSS color; when set, foreground uses `resolveTextColorForToken` for contrast.
+     * @default "default"
+     */
+    color: string;
+    /** Background image URL. @default "" */
+    url: string;
+    /** When true, the bar has role="banner" (main app header). Set false for secondary bars. @default true */
+    banner: boolean;
+    /** When true, reduces vertical padding for a compact bar. @default false */
+    dense: boolean;
+    /** When true, applies stronger shadow (e.g. for sticky bar after scroll). @default false */
+    elevated: boolean;
+    /** Accessible label for the default leading button when no slot content is provided. @default "Open menu" */
+    leadingLabel: string;
+    static styles: import("lit").CSSResult;
+    /** Updates host style variables when visual input properties change. */
+    protected updated(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/sky-appbar/sky-appbar.js

@@ -0,0 +1,173 @@
+import{__decorate as t,__metadata as e}from"tslib";import{LitElement as o,css as i,nothing as r,html as s}from"lit";import{property as n,customElement as a}from"lit/decorators.js";import{resolveColor as l,resolveTextColorForToken as p}from"../helper/utils/color-resolver.js";import{SkyIcon as d}from"../sky-icon/sky-icon.js";let c=class extends o{constructor(){super(...arguments),this.title="App Bar",this.color="default",this.url="",this.banner=!0,this.dense=!1,this.elevated=!1,this.leadingLabel="Open menu"}static{this.dependencies={"sky-icon":d}}static{this.styles=i`
+    :host {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: var(--appbar-bg-color, var(--sky-glass-primary));
+      color: var(--appbar-text-color, var(--sky-text-primary));
+      position: relative;
+      font-family: var(--sky-font);
+      overflow: hidden;
+      box-shadow: var(--sky-box-shadow-primary);
+      border-bottom: 1px solid var(--sky-border-light);
+    }
+
+    :host([elevated]) {
+      box-shadow: var(--appbar-shadow-elevated, var(--sky-box-shadow-secondary, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)));
+    }
+
+    .background {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      background-image: var(--appbar-bg-image, none);
+      background-size: cover;
+      background-position: center;
+      z-index: -2;
+    }
+
+    .background-overlay {
+      position: absolute;
+      inset: 0;
+      background: var(--appbar-bg-overlay, transparent);
+      z-index: -1;
+      pointer-events: none;
+    }
+
+    .content {
+      display: flex;
+      padding: var(--sky-space-2, 8px) var(--sky-space-4, 16px);
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      position: relative;
+      gap: var(--sky-space-2, 8px);
+    }
+
+    :host([dense]) .content {
+      padding-block: var(--sky-space-1, 4px);
+    }
+
+    .title-area {
+      flex: 1 1 auto;
+      min-width: 0;
+      padding-inline-start: var(--sky-space-2.5, 10px);
+    }
+
+    .title-text {
+      font-size: var(--sky-font-size-md, 1rem);
+      font-weight: var(--sky-font-weight-semibold, 600);
+      line-height: var(--sky-line-height-snug, 1.25);
+      font-family: var(--sky-font);
+    }
+
+    .leading {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .leading ::slotted(*) {
+      cursor: pointer;
+    }
+
+    .leading-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0;
+      padding: 0;
+      border: none;
+      background: none;
+      cursor: pointer;
+      font: inherit;
+      color: inherit;
+      -webkit-tap-highlight-color: transparent;
+      min-width: var(--sky-touch-target, 44px);
+      min-height: var(--sky-touch-target, 44px);
+      box-sizing: border-box;
+      border-radius: var(--sky-radius-md, 0.375rem);
+    }
+
+    .leading-button:focus-visible,
+    .leading ::slotted(*:focus-visible),
+    .actions ::slotted(*:focus-visible) {
+      outline: none;
+      box-shadow: var(--sky-focus-ring);
+    }
+
+    .icon {
+      cursor: pointer;
+      font-size: var(--sky-font-size-xl, 1.25rem);
+      display: flex;
+      align-items: center;
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: var(--sky-space-2, 8px);
+      padding-inline-start: var(--sky-space-2.5, 10px);
+      flex-shrink: 0;
+    }
+
+    .actions ::slotted(button),
+    .actions ::slotted([role="button"]) {
+      min-width: var(--sky-touch-target, 44px);
+      min-height: var(--sky-touch-target, 44px);
+      box-sizing: border-box;
+    }
+
+    :host-context([dir="rtl"]) .leading-button .icon {
+      transform: scaleX(-1);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host,
+      .content,
+      .leading-button,
+      .leading ::slotted(*),
+      .actions ::slotted(*) {
+        transition: none;
+      }
+
+      :host-context([dir="rtl"]) .leading-button .icon {
+        transform: none;
+      }
+    }
+
+  `}updated(t){if(t.has("color")&&(this.color?(this.style.setProperty("--appbar-bg-color",l(this.color)),this.style.setProperty("--appbar-text-color",p(this.color))):(this.style.removeProperty("--appbar-bg-color"),this.style.removeProperty("--appbar-text-color"))),t.has("url")){const t=this.url?`url(${this.url})`:"none";this.style.setProperty("--appbar-bg-image",t)}}render(){return s`
+      ${this.url?s`
+            <div
+              class="background"
+              style="background-image: url(${this.url});"
+            ></div>
+            <div class="background-overlay" aria-hidden="true"></div>
+          `:r}
+      <div
+        class="content"
+        part="content"
+        role="${this.banner?"banner":"group"}"
+      >
+        <div class="leading" part="leading">
+          <slot name="button">
+            <button
+              type="button"
+              class="leading-button"
+              aria-label="${this.leadingLabel}"
+            >
+              <sky-icon class="icon" icon="mdi:menu"></sky-icon>
+            </button>
+          </slot>
+        </div>
+        <div class="title-area" part="title">
+          <span class="title-text">${this.title}</span>
+        </div>
+        <div class="actions" part="actions">
+          <slot></slot>
+        </div>
+      </div>
+    `}};t([n({type:String}),e("design:type",Object)],c.prototype,"title",void 0),t([n({type:String}),e("design:type",Object)],c.prototype,"color",void 0),t([n({type:String}),e("design:type",Object)],c.prototype,"url",void 0),t([n({type:Boolean}),e("design:type",Object)],c.prototype,"banner",void 0),t([n({type:Boolean}),e("design:type",Object)],c.prototype,"dense",void 0),t([n({type:Boolean}),e("design:type",Object)],c.prototype,"elevated",void 0),t([n({type:String}),e("design:type",Object)],c.prototype,"leadingLabel",void 0),c=t([a("sky-appbar")],c);export{c as SkyAppbar};
+//# sourceMappingURL=sky-appbar.js.map

package/dist/sky-appbar/sky-appbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sky-appbar.js","sources":["../../src/sky-appbar/sky-appbar.ts"],"sourcesContent":[null],"names":["SkyAppbar","LitElement","constructor","this","title","color","url","banner","dense","elevated","leadingLabel","dependencies","SkyIcon","styles","css","updated","changedProperties","has","style","setProperty","resolveColor","resolveTextColorForToken","removeProperty","image","render","html","nothing","__decorate","property","type","String","prototype","Boolean","customElement"],"mappings":"qUAoEO,IAAMA,EAAN,cAAwBC,EAAxB,WAAAC,uBAOuBC,KAAAC,MAAQ,UAMRD,KAAAE,MAAQ,UAGRF,KAAAG,IAAM,GAGLH,KAAAI,QAAS,EAGTJ,KAAAK,OAAQ,EAGRL,KAAAM,UAAW,EAGZN,KAAAO,aAAe,WAyM7C,QAnOSP,KAAAQ,aAAyD,CAC9D,WAAYC,EACZ,QA0BcT,KAAAU,OAASC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4I1B,CAGiB,OAAAC,CAAQC,GAczB,GAbIA,EAAkBC,IAAI,WACpBd,KAAKE,OACPF,KAAKe,MAAMC,YAAY,oBAAqBC,EAAajB,KAAKE,QAC9DF,KAAKe,MAAMC,YACT,sBACAE,EAAyBlB,KAAKE,UAGhCF,KAAKe,MAAMI,eAAe,qBAC1BnB,KAAKe,MAAMI,eAAe,yBAI1BN,EAAkBC,IAAI,OAAQ,CAChC,MAAMM,EAAQpB,KAAKG,IAAM,OAAOH,KAAKG,OAAS,OAC9CH,KAAKe,MAAMC,YAAY,oBAAqBI,EAC9C,CACF,CAES,MAAAC,GACP,OAAOC,CAAI;QACPtB,KAAKG,IACHmB,CAAI;;;6CAG+BtB,KAAKG;;;YAIxCoB;;;;gBAIMvB,KAAKI,OAAS,SAAW;;;;;;;4BAObJ,KAAKO;;;;;;;qCAOIP,KAAKC;;;;;;KAOxC,GA7N4BuB,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAA4B9B,EAAA+B,UAAA,gBAMlBJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAA4B9B,EAAA+B,UAAA,gBAGlBJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAmB9B,EAAA+B,UAAA,cAGRJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,mCAAyBhC,EAAA+B,UAAA,iBAGdJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,mCAAyBhC,EAAA+B,UAAA,gBAGdJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMG,mCAA4BhC,EAAA+B,UAAA,mBAGlBJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAqC9B,EAAA+B,UAAA,uBA5B5C/B,EAAS2B,EAAA,CADrBM,EAAc,eACFjC"}

package/dist/sky-avatar/index.d.ts

@@ -0,0 +1 @@
+export * from "./sky-avatar";

package/dist/sky-avatar/index.js

@@ -0,0 +1 @@
+export * from './sky-avatar.js';