chore(packages): move the packages to root

core/src/components/item-divider/item-divider.ios.scss

@@ -0,0 +1,116 @@
+@import "./item-divider";
+@import "./item-divider.ios.vars";
+
+// iOS Item Divider
+// --------------------------------------------------
+
+.item-divider-ios {
+  @include padding-horizontal($item-ios-divider-padding-start, null);
+  @include safe-area-padding-horizontal($item-ios-divider-padding-start, null);
+  @include border-radius(0);
+
+  position: relative;
+
+  font-family: $item-ios-divider-font-family;
+  font-size: $item-ios-divider-font-size;
+
+  color: $item-ios-divider-color;
+  background-color: $item-ios-divider-background;
+}
+
+.item-divider-ios .item-divider-inner {
+  @include padding-horizontal(null, $item-ios-divider-padding-end / 2);
+
+  @media screen and (orientation: landscape) {
+    @include safe-area-padding-horizontal(null, $item-ios-divider-padding-end / 2);
+  }
+}
+
+
+// iOS Item Divider Slots
+// --------------------------------------------------
+
+.item-divider-ios [slot="start"] {
+  @include margin($item-ios-slot-start-margin-top, $item-ios-slot-start-margin-end, $item-ios-slot-start-margin-bottom, $item-ios-slot-start-margin-start);
+}
+
+.item-divider-ios [slot="end"] {
+  @include margin($item-ios-slot-end-margin-top, $item-ios-slot-end-margin-end, $item-ios-slot-end-margin-bottom, $item-ios-slot-end-margin-start);
+}
+
+.item-divider-ios ion-icon[slot="start"],
+.item-divider-ios ion-icon[slot="end"] {
+  @include margin($item-ios-icon-slot-margin-top, $item-ios-icon-slot-margin-end, $item-ios-icon-slot-margin-bottom, $item-ios-icon-slot-margin-start);
+}
+
+
+// iOS Item Divider Content
+// --------------------------------------------------
+
+.item-divider-ios h1 {
+  @include margin(0, 0, 2px);
+
+  font-size: 24px;
+  font-weight: normal;
+}
+
+.item-divider-ios h2 {
+  @include margin(0, 0, 2px);
+
+  font-size: 17px;
+  font-weight: normal;
+}
+
+.item-divider-ios h3,
+.item-divider-ios h4,
+.item-divider-ios h5,
+.item-divider-ios h6 {
+  @include margin(0, 0, 3px);
+
+  font-size: 14px;
+  font-weight: normal;
+  line-height: normal;
+}
+
+.item-divider-ios p {
+  @include margin($item-ios-paragraph-margin-top, $item-ios-paragraph-margin-end, $item-ios-paragraph-margin-bottom, $item-ios-paragraph-margin-start);
+
+  overflow: inherit;
+
+  font-size: $item-ios-paragraph-font-size;
+  line-height: normal;
+  text-overflow: inherit;
+  color: $item-ios-paragraph-text-color;
+}
+
+.item-divider-ios h2:last-child,
+.item-divider-ios h3:last-child,
+.item-divider-ios h4:last-child,
+.item-divider-ios h5:last-child,
+.item-divider-ios h6:last-child,
+.item-divider-ios p:last-child {
+  @include margin(null, null, 0, null);
+}
+
+
+// Generate iOS Item Divider Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-ios {
+  $color-base: ion-color($colors-ios, $color-name, base, ios);
+  $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
+  $color-shade: ion-color($colors-ios, $color-name, tint, ios);
+
+  .item-divider-ios-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+
+    p {
+      color: $color-contrast;
+    }
+
+    &.activated {
+      background-color: $color-shade;
+    }
+  }
+}

core/src/components/item-divider/item-divider.ios.vars.scss

@@ -0,0 +1,24 @@
+@import "../../themes/ionic.globals.ios";
+
+@import "../item/item.ios.vars";
+
+// iOS Item Divider
+// --------------------------------------------------
+
+/// @prop - Font family of the item
+$item-ios-divider-font-family:            $font-family-ios-base !default;
+
+/// @prop - Font size of the item
+$item-ios-divider-font-size:              17px !default;
+
+/// @prop - Background for the divider
+$item-ios-divider-background:             $background-ios-color-step-50 !default;
+
+/// @prop - Color for the divider
+$item-ios-divider-color:                  $text-ios-color-step-150 !default;
+
+/// @prop - Padding start for the divider
+$item-ios-divider-padding-start:          $item-ios-padding-start !default;
+
+/// @prop - Padding end for the divider
+$item-ios-divider-padding-end:            $item-ios-padding-end !default;

core/src/components/item-divider/item-divider.md.scss

@@ -0,0 +1,113 @@
+@import "./item-divider";
+@import "./item-divider.md.vars";
+
+// Material Design Item Divider
+// --------------------------------------------------
+
+.item-divider-md {
+  @include padding-horizontal($item-md-divider-padding-start, null);
+
+  border-bottom: $item-md-divider-border-bottom;
+
+  font-family: $item-md-divider-font-family;
+  font-size: $item-md-divider-font-size;
+
+  color: $item-md-divider-color;
+  background-color: $item-md-divider-background;
+}
+
+.item-divider-md .item-divider-inner {
+  @include padding-horizontal(null, ($item-md-divider-padding-end / 2));
+}
+
+
+// Material Design Item Divider Slots
+// --------------------------------------------------
+
+.item-divider-md [slot="start"],
+.item-divider-md [slot="end"] {
+  @include margin($item-md-slot-margin-top, $item-md-slot-margin-end, $item-md-slot-margin-bottom, $item-md-slot-margin-start);
+}
+
+.item-divider-md ion-icon[slot="start"],
+.item-divider-md ion-icon[slot="end"] {
+  @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start);
+}
+
+.item-divider-md ion-icon[slot="start"] + .item-inner,
+.item-divider-md ion-icon[slot="start"] + .item-input {
+  @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null);
+}
+
+.item-divider-md ion-avatar[slot="start"],
+.item-divider-md ion-thumbnail[slot="start"] {
+  @include margin(($item-md-padding-end / 2), $item-md-padding-end, ($item-md-padding-end / 2), 0);
+}
+
+.item-divider-md ion-avatar[slot="end"],
+.item-divider-md ion-thumbnail[slot="end"] {
+  @include margin(($item-md-padding-end / 2));
+}
+
+
+// Material Design Item Divider Content
+// --------------------------------------------------
+
+.item-divider-md h1 {
+  @include margin(0, 0, 2px);
+
+  font-size: 24px;
+  font-weight: normal;
+}
+
+.item-divider-md h2 {
+  @include margin(2px, 0);
+
+  font-size: 16px;
+  font-weight: normal;
+}
+
+.item-divider-md h3,
+.item-divider-md h4,
+.item-divider-md h5,
+.item-divider-md h6 {
+  @include margin(2px, 0);
+
+  font-size: 14px;
+  font-weight: normal;
+  line-height: normal;
+}
+
+.item-divider-md p {
+  @include margin(0, 0, 2px);
+
+  overflow: inherit;
+
+  font-size: 14px;
+  line-height: normal;
+  text-overflow: inherit;
+  color: $item-md-paragraph-text-color;
+}
+
+
+// Generate Material Design Item Divider Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-md {
+  $color-base: ion-color($colors-md, $color-name, base, md);
+  $color-contrast: ion-color($colors-md, $color-name, contrast, md);
+  $color-shade: ion-color($colors-md, $color-name, tint, md);
+
+  .item-divider-md-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+
+    p {
+      color: $color-contrast;
+    }
+
+    &.activated {
+      background-color: $color-shade;
+    }
+  }
+}

core/src/components/item-divider/item-divider.md.vars.scss

@@ -0,0 +1,27 @@
+@import "../../themes/ionic.globals.md";
+
+@import "../item/item.md.vars";
+
+// Material Design Item Divider
+// --------------------------------------------------
+
+/// @prop - Color for the divider
+$item-md-divider-color:              $text-md-color-step-600 !default;
+
+/// @prop - Background for the divider
+$item-md-divider-background:         $background-md-color !default;
+
+/// @prop - Font family for the divider
+$item-md-divider-font-family:        $font-family-md-base !default;
+
+/// @prop - Font size for the divider
+$item-md-divider-font-size:          14px !default;
+
+/// @prop - Border bottom for the divider
+$item-md-divider-border-bottom:      1px solid $item-md-border-color !default;
+
+/// @prop - Padding start for the divider
+$item-md-divider-padding-start:      $item-md-padding-start !default;
+
+/// @prop - Padding end for the divider
+$item-md-divider-padding-end:        $item-md-padding-end !default;

core/src/components/item-divider/item-divider.scss

@@ -0,0 +1,58 @@
+@import "./item-divider.vars";
+
+
+// Item Divider
+// --------------------------------------------------
+
+ion-item-divider {
+  @include margin(0);
+  @include padding(0);
+
+  box-sizing: border-box;
+
+  z-index: $z-index-item-divider;
+  display: flex;
+  overflow: hidden;
+
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+
+  min-height: $item-divider-min-height;
+}
+
+ion-item-divider[sticky] {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+}
+
+.item-divider-inner {
+  @include margin(0);
+  @include padding(0);
+
+  display: flex;
+  overflow: hidden;
+
+  flex: 1;
+  flex-direction: inherit;
+  align-items: inherit;
+  align-self: stretch;
+
+  min-height: inherit;
+
+  border: 0;
+}
+
+.item-divider-wrapper {
+  display: flex;
+  overflow: hidden;
+
+  flex: 1;
+  flex-direction: inherit;
+  align-items: inherit;
+  align-self: stretch;
+
+  text-overflow: ellipsis;
+}

core/src/components/item-divider/item-divider.tsx

@@ -0,0 +1,53 @@
+import { Component, Element, Prop } from '@stencil/core';
+
+
+@Component({
+  tag: 'ion-item-divider',
+  styleUrls: {
+    ios: 'item-divider.ios.scss',
+    md: 'item-divider.md.scss'
+  },
+  host: {
+    theme: 'item-divider'
+  }
+})
+export class ItemDivider {
+  @Element() private el: HTMLElement;
+
+  /**
+   * The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * The mode determines which platform styles to use.
+   * Possible values are: `"ios"` or `"md"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md';
+
+  componentDidLoad() {
+    // Change the button size to small for each ion-button in the item
+    // unless the size is explicitly set
+    const buttons = this.el.querySelectorAll('ion-button');
+    for (let i = 0; i < buttons.length; i++) {
+      if (!buttons[i].size) {
+        buttons[i].size = 'small';
+      }
+    }
+  }
+
+  render() {
+    return [
+      <slot name='start'></slot>,
+      <div class='item-divider-inner'>
+        <div class='item-divider-wrapper'>
+          <slot></slot>
+        </div>
+        <slot name='end'></slot>
+      </div>
+    ];
+  }
+}

core/src/components/item-divider/item-divider.vars.scss

@@ -0,0 +1,8 @@
+@import "../../themes/ionic.globals";
+
+
+// Item Divider
+// --------------------------------------------------
+
+/// @prop - Minimum height for the divider
+$item-divider-min-height:        30px !default;

core/src/components/item-divider/readme.md

@@ -0,0 +1,51 @@
+# ion-item-divider
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+#### color
+
+string
+
+The color to use from your Sass `$colors` map.
+Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+For more information, see [Theming your App](/docs/theming/theming-your-app).
+
+
+#### mode
+
+
+
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+
+
+## Attributes
+
+#### color
+
+string
+
+The color to use from your Sass `$colors` map.
+Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+For more information, see [Theming your App](/docs/theming/theming-your-app).
+
+
+#### mode
+
+
+
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

core/src/components/item-divider/test/standalone/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Item Divider - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-item-divider>
+    <ion-label>Item Divider</ion-label>
+    <button slot="end">button</button>
+  </ion-item-divider>
+</body>
+
+<style>
+  body {
+    margin: 0;
+  }
+</style>
+
+</html>